Я работаю над динамической визуализацией контента в компоненте с помощью. Json. Но после рендеринга контентная страница не отображается. Пожалуйста, помогите мне .................... .................................................. .................................................. .................................................. .................................................. .................................................. .....................................
код ручки URL: https://codepen.io/dotnet345/pen/oNXBxBM
код песочницы: https://codesandbox.io/s/gifted-thompson-t6pf8
import React, { PropTypes } from 'react';
class Dashboard extends React.Component {
constructor(props){
var files;
super(props);
this.state = {
selectedFile: null,
imagePreviewUrl: null,
Comment:'',
seen: false,
showlikePopup: false,
errors: {},
likebutton:true,
savebutton:true,
count:0,
clicked: false,
mypost:[]
}
this.onChangeComment = this.onChangeComment.bind(this);
this.changeColor = this.changeColor.bind(this);
}
onChangeComment(e) {
this.setState({ Comment: e.target.value })
}
togglePop = () => {
this.setState({
seen: !this.state.seen
});
};
togglePoplike = () => {
this.setState({
showlikePopup: !this.state.showlikePopup
});
};
fileChangedHandler = event => {
this.setState({
selectedFile: event.target.files[0]
})
var file = this.refs.file.files[0].name;
let reader = new FileReader();
reader.onloadend = () => {
this.setState({
imagePreviewUrl: reader.result
});
}
reader.readAsDataURL(event.target.files[0])
}
changeColor= () => {
this.setState({likebutton: !this.state.likebutton})
const clicked = this.state.clicked;
if(clicked){
this.setState({count: this.state.count - 1, clicked: false});
} else {
this.setState({count: this.state.count + 1, clicked: true})
}
}
viewPost= () =>{
this.props.history.push('/post')
}
changeColorsave= () => {
this.setState({savebutton: !this.state.savebutton})
}
handleValidation(){
let errors = {};
let formIsValid = true;
if (this.state.selectedFile == null) {
formIsValid = false;
errors["Comment"] = "*Please Select file";
}
if(this.state.Comment==""){
formIsValid = false;
errors["Comment"] = "*Please enter Caption";
}
this.setState({ errors: errors });
return formIsValid;
}
Submit = (e) => {
var fd = new FormData();
fd.append('file', this.state.selectedFile);
if(this.state.selectedFile!=null){
const obj = {
file:this.state.selectedFile.name,
Comment:this.state.Comment
}
}
if(this.handleValidation()){
}else{
}
e.preventDefault()
}
render() { var Json={
"AllPost":[
{
"User_Id":1,
"Username":"te",
"Records":[
{
"Profile":[{
"User_Id":"1",
"UserImage":"",
"Fullname":"Test",
"Username":"te"
}],
"Post":[{
"Post_Id":"1",
"UploadFile":"",
"Post_Caption":"Test",
"User_Id":"1"
}],
"likedetails":[{
"Post_Id":"1",
"LikeCount":"345"
}],
"commentdetails":[
{
"Comments":"testA",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testB",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testC",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testD",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testE",
"Username": "te",
"Comment_Date":"12-12-12"
}
]
}
]
},
{
"User_Id":2,
"Username":"te",
"Records":[
{
"Profile":[{
"User_Id":"2",
"UserImage":"",
"Fullname":"Test",
"Username":"te"
}],
"Post":[{
"Post_Id":"2",
"UploadFile":"",
"Post_Caption":"Test",
"User_Id":"2"
}],
"likedetails":[{
"Post_Id":"12",
"LikeCount":"3452"
}],
"commentdetails":[
{
"Comments":"testA",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testB",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testC",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testD",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testE",
"Username": "te",
"Comment_Date":"12-12-12"
}
]
}
]
},
{
"User_Id":3,
"Username":"te",
"Records":[
{
"Profile":[{
"User_Id":"3",
"UserImage":"",
"Fullname":"Test3",
"Username":"te3"
}],
"Post":[{
"Post_Id":"3",
"UploadFile":"",
"Post_Caption":"Test",
"User_Id":"3"
}],
"likedetails":[{
"Post_Id":"3",
"LikeCount":"345"
}],
"commentdetails":[
{
"Comments":"testA",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testB",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testC",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testD",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testE",
"Username": "te",
"Comment_Date":"12-12-12"
}
]
}
]
},
{
"User_Id":4,
"Username":"te",
"Records":[
{
"Profile":[{
"User_Id":"4",
"UserImage":"",
"Fullname":"Test4",
"Username":"te4"
}],
"Post":[{
"Post_Id":"4",
"UploadFile":"",
"Post_Caption":"Test4",
"User_Id":"4"
}],
"likedetails":[{
"Post_Id":"4",
"LikeCount":"3454"
}],
"commentdetails":[
{
"Comments":"testA",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testB",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testC",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testD",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testE",
"Username": "te",
"Comment_Date":"12-12-12"
}
]
}
]
},
{
"User_Id":5,
"Username":"te",
"Records":[
{
"Profile":[{
"User_Id":"5",
"UserImage":"",
"Fullname":"Test5",
"Username":"te5"
}],
"Post":[{
"Post_Id":"5",
"UploadFile":"",
"Post_Caption":"Test5",
"User_Id":"5"
}],
"likedetails":[{
"Post_Id":"5",
"LikeCount":"3455"
}],
"commentdetails":[
{
"Comments":"testA",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testB",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testC",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testD",
"Username": "te",
"Comment_Date":"12-12-12"
},
{
"Comments":"testE",
"Username": "te",
"Comment_Date":"12-12-12"
}
]
}
]
}
]
}
var follow ={
"AllFollow":[
{
"Records":[
{
"Followdetails":[
{
"User_Id":"1",
"UserImage":"",
"Fullname":"Test1",
"Username":"te1"
},
{
"User_Id":"2",
"UserImage":"",
"Fullname":"Test2",
"Username":"te2"
},
{
"User_Id":"3",
"UserImage":"",
"Fullname":"Test3",
"Username":"te3"
},
{
"User_Id":"4",
"UserImage":"",
"Fullname":"Test4",
"Username":"te4"
},
{
"User_Id":"5",
"UserImage":"",
"Fullname":"Test5",
"Username":"te5"
}
]
}
]
}
]
}
let btn_class = this.state.likebutton ? "spriteheartempty" : "spriteheartfill";
let btn_savclass = this.state.savebutton ? "spritesave" : "spritesaved";
let mypost=this.state.mypost;
let arr=[];
let $imagePreview = (<div className="previewText image-container">Please select an Image for Preview</div>);
if (this.state.imagePreviewUrl) {
$imagePreview = ( <div className="image-container" style={{ marginTop: '5px',padding: '5px'}} ><img src={this.state.imagePreviewUrl} alt="icon" width="200" /> </div>)
}
return (
<div id="react-root">
<Helmet>
<meta charSet="utf-8" />
<title>Dashboard • Instagram</title>
<link rel="icon" href="/insta.ico" />
</Helmet>
<section className="post_section_flex post_section">
<Header/>
<div></div>
<main className="post_main post_main1" role="main">
<section className="post_section_left_flex post_section_left">
{
Json.AllPost.map((user) => {
{
if(user.Records!=undefined)
{
user.Records.map(record =>{
return (
<div className="post_section_outer">
<div>
<div style= {{flexdirection: 'column', paddingbottom: '6553px', paddingtop: '0px'}}>
<article className="_8Rm4L M9sTE L_LMM SgTZ1 ePUX4">
{
record.Post.map(post =>{
return (
<header className="post_section_header_flex post_section_header ">
<div className="post_section_header_icon_flex post_section_header_icon" role="button" tabIndex="0">
<canvas className="cnvas" height="42" width="42" style={{position: 'absolute', top: '-5px', left: '-5px', width: '42px', height: '42px'}}></canvas>
<span className="post_section_header_span " role="link" tabIndex="0" style={{width: '32px', height: '32px'}}>
<img alt="followindiancricket's profile picture" className="post_section_header_image" src="https://scontent-maa2-1.cdninstagram.com/v/t51.2885-19/s150x150/72440940_1149583128547207_8378383594128670720_n.jpg?_nc_ht=scontent-maa2-1.cdninstagram.com&_nc_ohc=SLnG-HyjbUsAX-gpA24&oh=70276049b5204ca4361b9af8e5609e03&oe=5ED53A34"/>
</span>
</div>
<div className="post_section_header_content_flex post_section_header_content">
<div className="post_section_header_content1">
<div className="post_section_header_content2">
<h2 className="post_section_header_content3">
<a href="/follow" className="post_section_header_a_flex post_section_header_a">
{user.Username}
Test</a>
</h2>
</div>
</div>
</div>
</header>
);
})
}
<div className="">
<div className="post_section_body_outer" role="button" tabIndex="0">
<div className="post_section_body_outer1">
<div className="post_section_body_outer2" style={{paddingbottom: '56.1333%'}}>
<img alt="" className="post_section_body_img" decoding="auto" sizes="614px" style={{objectfit: 'cover'}} src="https://scontent-maa2-1.cdninstagram.com/v/t51.2885-15/e35/83308853_1028085250883216_7625513747424223693_n.jpg?_nc_ht=scontent-maa2-1.cdninstagram.com&_nc_cat=108&_nc_ohc=c5a_p6bAp4EAX9N8U0L&oh=039d39990a00df5addab5426a98c4ad7&oe=5ECC6722" />
</div>
<div className="post_section_body_outer3"></div>
</div>
</div>
</div>
<div className="post_section_comment">
<section className="post_section_comment_like_count_val_flex post_section_comment_like_count_val">
<div className="post_section_comment_like_count_flex_outer">
<button className="post_section_comment_like_count_flex post_section_comment_like_count1" type="button" onClick={this.togglePoplike}>
<span>{this.state.count}</span> likes
</button>
{this.state.showlikePopup ? <Popuplike toggle={this.togglePoplike} /> : null}
</div>
</section>
<div className=" Igw0E IwRSH eGOV_ _4EzTm XfCBB ">
{
record.Post.map(post =>{
return (
<div className=" Igw0E IwRSH eGOV_ _4EzTm pjcA_ ">
<div className=" QzzMF Igw0E IwRSH eGOV_ vwCYk ">
<a className="FPmhX notranslate MBL3Z" href="">
{user.Username}
Follow</a>
<span>
<span>
{post.Post_Caption}
Test</span>
</span>
</div>
</div>
);
})
}
{
record.commentdetails.forEach(comment => {
return (
<div>
<div className=" Igw0E IwRSH eGOV_ _4EzTm pjcA_ ">
<a className="r8ZrO" href =""></a>
</div>
<div className=" Igw0E rBNOH eGOV_ ybXk5 _4EzTm pjcA_ ">
<div className=" QzzMF Igw0E IwRSH eGOV_ vwCYk ">
<a className="FPmhX notranslate MBL3Z" href="">
{comment.Username}
Follow</a>
<span>
<span>
{comment.Comments}
Test</span>
</span>
</div>
</div>
</div>
);
})
}
</div>
<section className="post_section_comment_text_outer">
<div>
<form className="post_section_comment_text_form" >
<textarea aria-label="Add a comment…" placeholder="Add a comment…" className="post_section_comment_text_box" autoComplete="off" onChange={this.onChangeComment} autoCorrect="off" value={this.state.Comment} style={{height: '18px'}}></textarea>
<button className="sqdOP yWX7d y3zKF " type="submit" disabled={!this.state.Comment}>Post</button>
</form>
</div>
</section>
</div>
<div className="post_section_header_button">
<button className="post_section_header_button_flex" type="button" onClick={this.togglePop}>
{this.state.seen ? <Popup toggle={this.togglePop} /> : null}
<div className="post_section_header_button_flex1" style={{height: '24px', width: '24px'}}>
<svg aria-label="More options" className="_8-yf5 " fill="#262626" height="16" viewBox="0 0 48 48" width="16">
<circle clipRule="evenodd" cx="8" cy="24" fillRule="evenodd" r="4.5"></circle>
<circle clipRule="evenodd" cx="24" cy="24" fillRule="evenodd" r="4.5"></circle>
<circle clipRule="evenodd" cx="40" cy="24" fillRule="evenodd" r="4.5"></circle>
</svg>
</div>
</button>
</div>
</article>
</div>
</div>
</div>
);
})
}
} })}
<div className="post_section_space">
</div>
<div className="post_section_right">
<div className="post_section_right_top">
<div className="post_section_right_top1">
<div className="post_section_right_button" role="button" tabIndex="0">
<canvas className="CfWVH" height="60" width="60" style={{position: 'absolute', top: '-5px', left: '-5px', width: '60px', height: '60px'}}></canvas>
<a className="_2dbep qNELH kIKUG" href="/profile" style={{width: '50px', height: '50px'}}><img alt=" profile picture" className="_6q-tv" src="https://scontent-maa2-1.cdninstagram.com/v/t51.2885-19/s150x150/13551647_1103951302984701_819335256_a.jpg?_nc_ht=scontent-maa2-1.cdninstagram.com&_nc_ohc=kNncCEMGknkAX8E7LX5&oh=d114e3d1b4374efab3aa4f8686ad3ebe&oe=5EC67023"/></a>
</div>
<div className="post_section_right_prof">
<div className="post_section_right_prof1">
<a className="post_section_right_lin" href="/profile"></a>
</div>
<div className="post_section_right_name">
</div>
</div>
</div>
</div>
<div className="post_section_right_suggest_flex post_section_right_suggest_outer">
<span style={{padding: '5px', textAlign: 'center'}}><h1>Post File</h1></span><br></br>
<div className="post_section_right_suggest_flex1 post_section_right_suggest_outer1">
<form>
<input ref="file" type="file" name="user[image]" onChange={this.fileChangedHandler} style={{padding: '5px', marginLeft: '31px'}} />
{$imagePreview}
<textarea className="p7vTm" id="pepBio" placeholder="Enter Text here" value={this.state.Comment} onChange={this.onChangeComment}></textarea>
<span style={{ color: "red" }}>{this.state.errors["Comment"]}</span>
<div className="signin_form_button">
<input type="submit" value="Upload" onClick={this.Submit} className="signin_form_buttonstyle" />
</div>
</form>
</div>
</div>
})
})
}
</div>
</div>
</section>
</main>
</section>
<Footer/>
</div>
)
}
}
export default Dashboard;
