Basically, I am sending an array of objects into my function as a parameter, but the function doesn't do anything. When I want to print out my array of objects, I can show all items on the console, however, I cannot render them.
renderComment() function doesn't work or doesn't return anything. Also you can take a closer look at my render method, you will see that commented code to print out the expected output of renderComment in the console.
class DishDetails extends Component {
renderDish(dish) {
if (dish) {
return (
<div>
<Card className="col-12 col-md-5 m-1">
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
</div>
)
} else {
return (
<div></div>
)
}
}
renderComments(comments) {
comments.map(comment => {
return (
<li key={comment.id}>
<p>{comment.comment}</p>
<p>{comment.author}</p>
</li>
)
})
}
render() {
const selected = this.props.selectedDish;
/* if(selected) {
this.props.selectedDish.comments.map(comment => {
console.log(comment.comment)
})
} */
return (
<div>
{selected &&
<div>
{this.renderDish(this.props.selectedDish)}
{this.renderComments(this.props.selectedDish.comments)}
</div>
}
</div>
)
}
}
export default DishDetails
The renderComment function does not return anything because there is no return statement in the function. There is a return in the map (which is still required), but that is not the return for the function.
To fix this, add a return at the top of renderComment, like this:
renderComment(comments) {
return comments.map(comment => {
return (
<li key={comment.id}>
<p>{comment.comment}</p>
<p>{comment.author}</p>
</li>
)
}
}
Related
Why props isn't working in my project. I can't figure out! Here is the three file. I am just learning typescript. But the code isn't error but still not working!
This is index.tsx file
index.tsx
const Home: NextPage = () => {
return (
<div className={styles.container}>
<Header name={"ali Ahad"} />
<PersonList Person={Person} />
</div>
)
}
export default Home
This is PersonList.tsx file
PersonList.tsx
type personType={
Person:{
name:string,
age:number,
address:string
}[];
};
const PersonList=(props: personType)=> {
return (
<>{props.Person.map((man)=>{
<div>
<h1>{man.name}</h1>
<h2>{man.age}</h2>
<h3>{man.address}</h3>
</div>
})}</>
)
}
export default PersonList
This is Data.tsx file
Data.tsx
const Person=[
{
name:"John",
age:30,
address:"New York"
},
{
name:"Ali",
age:25,
address:"New York"
},
{
name:"Ahmad",
age:20,
address:"New York"
},
]
export default Person;
You're not seeing any of the persons being displayed/rendered because you're missing an explicit return statement in your map()'s arrow function.
// returning from a block body (braces) requires an explicit `return`
return (
<>
{props.Person.map((man) => {
/* missing `return` */
<div>
<h1>{man.name}</h1>
<h2>{man.age}</h2>
<h3>{man.address}</h3>
</div>;
})}
</>
);
You would need to do something like this...
// with an explicit `return` this will work, albeit verbose
return (
<>
{props.Person.map((man) => {
/* `return` added */
return (
<div key={man.name}>
<h1>{man.name}</h1>
<h2>{man.age}</h2>
<h3>{man.address}</h3>
</div>
);
})}
</>
);
...but this would be more concise:
// removing the braces (replaced with parentheses) will make things concise
// and the `return` will be implied
return (
<>
{props.Person.map((man) => (
<div key={man.name}>
<h1>{man.name}</h1>
<h2>{man.age}</h2>
<h3>{man.address}</h3>
</div>
))}
</>
);
I have an array of files and I want certain ones to be displayed and hyperlinked. I'm using the map method and when only 1 file displays, it links properly. I need some help with the syntax when multiple files must be displayed.
render() {
const mappings = {
'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
}
if (this.props.channelSelectedData.length >= 1){
return(
<div className="channel-detail-box">
<p>Outages:
<a href={mappings[this.props.channelSelectedData.map(inspection => {
return inspection.outage
})]}>
{this.props.channelSelectedData.map(inspection => {
return inspection.outage + ' '
})}</a>
</p>
</div>
)
}
else {
return (
<div>
<p>No data found</p>
</div>
)
}
}
}
Is this what you are looking for ?
render() {
const mappings = {
'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
}
const { channelSelectedData } = this.props
if (channelSelectedData.length === 0) {
return <div>
<p>No data found</p>
</div>
}
return <div className="channel-detail-box">
<p>Outages: {channelSelectedData.map(({ outage }) => <a href={mappings[outage]}>{outage}</a>)}</p>
</div>
}
const mappings = {
'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
};
if (!channelSelectedData || channelSelectedData.length <= 0) {
return (
<div>
<p>No data found</p>
</div>
);
}
const links = channelSelectedData.map(({ outage }) => (
<a href={mappings[outage]}>{outage}</a>
));
return (
<div className="channel-detail-box">
<p>Outages: {links}</p>
</div>
);
If I am understanding the rest of your question correctly, I believe your issue is just using map at the incorrect point. What map does is returns an array of values which in this case would be an array of applicable tags.
render() {
const mappings = {
'P1011': 'http://192.168.191.128:8080/Pickering-P1011-May-Verified_Results5.xls',
'P1511': 'http://192.168.191.128:8080/PNGS-1511-Verified_Results_2.xls',
'P1711': 'http://192.168.191.128:8080/PNGS-P1711_Verified_Results_3.xlsx',
'P1911': 'http://192.168.191.128:8080/PLGS_Unit_1-PL1911_VerifiedResults2.xlsx',
}
if (this.props.channelSelectedData.length >= 1){
return(
<div className="channel-detail-box">
<p>Outages:
<>
{
this.props.channelSelectedData.map(chanel=>{
return (
<a href={mappings[chanel]}>
{chanel+' '}
</a> )
})
}
</>
</p>
</div>
)
}
else {
return (
<div>
<p>No data found</p>
</div>
)
}
}
I've read the documentation, I don't know why it's working but it's messed up. Here's my code :
function CarouselItem(props) {
const { post } = props
return (
<React.Fragment>
<div>
<img src={`http://localhost:5000/image/${post.foto}`} />
<p className="legend">{post.judul}</p>
</div>
</React.Fragment>
)
}
function NewsItem(props) {
const { posts } = props.post
let content = posts.map(item => <CarouselItem key={item._id} post={item} />)
return (
<div>
<Carousel showThumbs={false}>{content}</Carousel>
</div>
)
}
It turns out like this :
Use this in the first line of your .js file:
import 'react-responsive-carousel/lib/styles/carousel.min.css';
render() {
const tableStyle = this.getTableStyle();
const tableSettings = this.getTableSettings();
return (
<div style={tables}>
<TablePosition
contextMenuOn={true}
step={this.props.step}
pdfData={this.props.pdfData}
tableSettings={tableSettings}
tableStyle={tableStyle}
fileName={this.state.fileName}
tableSize={this.getTableSize()}
tableOffset={this.state.tableOffset}
desiredWidth={700}
updateXOffset={x => this.updateXOffset(x)}
updateYOffset={y => this.updateYOffset(y)}
markTable={() => this.markTable()}
setOutputLabels={(row, col, val) => this.setOuputLabels(row, col, val)}
/>
</div>
);
if (!this.props.isThirdStep) {
return (
<div>
<div style={sideBySide}>
<PDFViewer
isThirdStep={this.props.isThirdStep}
paginationCallback={this.handlePageChange}
pdfData={this.state.pdfData}
desiredWidth={600}
selectedPage={this.props.savedPageNo}
/>
</div>
</div>
);
} else {
return (
<div>
<ReferenceMenu />
</div>
);
}
}
In my component's render, I try to render several components based on certain conditions.
So, basically, the TablePoisition always stays there, and the PDFViewer and ReferenceMenu renders conditionally.
However, what I see on both conditions is only the TablePosition component.
Is this not supposed to work?
As explained since you want to combine two components you should change your render logic. One component will be sit there always and the other one will be rendered conditionally. So, you need to render that last component with the sticky one in the same return. I would do something like this:
renderPDFViewer = () => (
<div>
<div style={sideBySide}>
<PDFViewer
isThirdStep={this.props.isThirdStep}
paginationCallback={this.handlePageChange}
pdfData={this.state.pdfData}
desiredWidth={600}
selectedPage={this.props.savedPageNo}
/>
</div>
</div>
);
render() {
const tableStyle = this.getTableStyle();
const tableSettings = this.getTableSettings();
return (
<div>
<div style={tables}>
<TablePosition
contextMenuOn={true}
step={this.props.step}
pdfData={this.props.pdfData}
tableSettings={tableSettings}
tableStyle={tableStyle}
fileName={this.state.fileName}
tableSize={this.getTableSize()}
tableOffset={this.state.tableOffset}
desiredWidth={700}
updateXOffset={x => this.updateXOffset(x)}
updateYOffset={y => this.updateYOffset(y)}
markTable={() => this.markTable()}
setOutputLabels={(row, col, val) => this.setOuputLabels(row, col, val)}
/>
</div>
{
!this.props.isThirdStep
? this.renderPDFViewer()
: ( <div><ReferenceMenu /></div> )
}
</div>
);
}
You need to place your conditional renders inside variables or something similar.
var conditionContent1 = null;
var conditionContent2 = null;
if(condition1){
conditionContent1 = <div>conditional content 1</div>;
}
if(condition2){
conditionContent2 = <div>conditional content 2</div>;
}
return (
<div id="wrapper">
<div>
content
</div>
{conditionContent1}
{conditionContent2}
</div>
);
I added a wrapper div; because, I believe render's return doesn't like having multiple root elements.
If the variables are null; then, it won't affect the overall render.
I want to use warningItem within my return statement in order to map some data into a react component.
I want to loop over area but have problems with syntax.
createWarnings = warningsRawData => {
return warningsRawData.map(warningItem => {
return (
<div>
<p className={styles.warningMainText} />
<p>warningItem.area[0]</p>
</div>
);
});
};
It looks like you are missing the brackets around it. Try:
createWarnings = warningsRawData => {
return warningsRawData.map( (warningItem, i) => {
return (
<div key={i}>
<p className={styles.warningMainText} />
<p>{warningItem.area[0]}</p>
</div>
);
});
};
Whenever you loop to return elememnt in react, add key attribute is must. Else you will get warning.And add {warningItem.area[0]}
createWarnings = warningsRawData => {
let values = warningsRawData.map((warningItem,index) => {
return (
<div key={index}>
<p className={styles.warningMainText} />
<p>{warningItem.area[0]}</p>
</div>
);
});
return values
}
;