I have following code which doesnt show any list as expected.
I am confused why its not working , whats missing .
return (
<div>
List
<ul>
{events.map((event,index)=>{
<li key={index}>Name:{event.name}</li>
})
}
</ul>
</div>
);
Above code is a return block of function component I tried replacing the with many other tags but it just doesnt return anything expect the text outside the map function.
Please help.
You have a typo - you're using { } braces there, in which case you'd need a return too. Failing to have a return in a curly-braced function equals an implicit return undefined;.
return (
<div>
List
<ul>
{events.map((event, index) => {
return <li key={index}>Name:{event.name}</li>;
})}
</ul>
</div>
);
Or, more simply, use regular parentheses to make the return implicit (see Concise body here):
return (
<div>
List
<ul>
{events.map((event, index) => (
<li key={index}>Name:{event.name}</li>
))}
</ul>
</div>
);
Related
I want to loop through a props screenshots but it's not working for me! I used to do it in other components and it was working. I'm losing my mind :(
please find below my code:
{screenshots && <h2>Hello</h2>}
this works and rendered perfectly.
but when I do a loop like
{screenshots && screenshots.length && screenshots.map(screenshot => {
<div className="container img--container" key={screenshot.id}>
<SVG
className="icon remove--icon"
src={removeCircle}
/>
<img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
</div>
})}
what's inside the loop doesn't get rendered!
and the console doesn't show any error.
please any help?
Missing return!! You can use "()" to return immediate.
{screenshots && screenshots.length && screenshots.map(screenshot => (
<div className="container img--container" key={screenshot.id}>
<SVG
className="icon remove--icon"
src={removeCircle}
/>
<img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
</div>
))}
When using map, you have to be careful what to put after the =>.
If you have to process elements of the array when mapping, do this:
array.map(a => {
// Javascript here
return(
<div>JSX here!</div>
);
});
If you just have to render JSX, do this:
array.map(a => (
<div>JSX here!</div>
));
Since => () is implicitly returning the stuff between ().
In arrow functions curly brackets are used for closures. So it will wrap your function.
If you use arrow function with curly brackets, you have to use return. Like this:
screenshots.map(screenshot => {
console.log('I can do whatever I like here...');
return 'but I have to return something!'
});
Arrow function without curly brackets automatically returns your statement and it has to be used only with one statement.
screenshots.map(screenshot =>
'It returns this string without using word `return`!'
);
Your code should look like this (with curly brackets and return):
{screenshots && screenshots.length && screenshots.map(screenshot => {
console.log('Wow! I am in arrow function! I have to return something.');
return
<div className="container img--container" key={screenshot.id}>
<SVG className="icon remove--icon" src={removeCircle}/>
<img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
</div>
})}
or you can just delete curly brackets like this:
{screenshots && screenshots.length && screenshots.map(screenshot =>
<div className="container img--container" key={screenshot.id}>
<SVG className="icon remove--icon" src={removeCircle}/>
<img src={screenshot.image} title={"screenshot"} className="p-absolute"/>
</div>
)}
You can read more about arrow functions at w3schools.
I have a function that I would not like to render if a certain condition is not met.
runinrender(){
let data = this.props.loadedPolls;
return data.map((element,i) => {
return (<div key={i} className='elementPoll'>
<ul>
<li>Complaint: <p> {element.question}</p></li>
<li>Author: <p>{element.createdBy}</p> </li>
<li><ModalComplaint useris={this.state.useris} orderMe={i} updatedParentAndDB={this.updatedParentAndDB} elementname={element.question} elementId={element._id} elementoptions={element.options} elementvotes={element.options.votes}/></li>
</ul>
</div>)
});
}
Essentially, I want to add
if the element.question.charAt(0) == 'K' only then return values of complaint, ModalComplaint and author, else return nothing
I have tried adding the if statement in multiple places; however, none seem to work.
Any help is appreciated.
You could use filter to narrow down your array before you map it.
Array.prototype.filter
runinrender(){
let data = this.props.loadedPolls;
return data.filter(element => element.question.charAt(0) === 'K').map((element,i) => {
return (<div key={i} className='elementPoll'>
<ul>
<li>Complaint: <p> {element.question}</p></li>
<li>Author: <p>{element.createdBy}</p> </li>
<li><ModalComplaint useris={this.state.useris} orderMe={i} updatedParentAndDB={this.updatedParentAndDB} elementname={element.question} elementId={element._id} elementoptions={element.options} elementvotes={element.options.votes}/></li>
</ul>
</div>)
});
}
I am having an object with data having key and value
In the modal i was planning to show all the data from object in list tag
in singleproductdetails i am having object with key and value
{
Object.keys(singleproductdetails).forEach(function eachKey(key) {
return (
console.log("hello", key, singleproductdetails[key])
<li className="about-title"><label>{key} </label><span>:</span></li>
<li><p>{singleproductdetails[key]} </p></li>
)
})
}
i think this would work,
Object.keys(this.props.dataDetail).map(function(detail, id) {
return <span key={id}>{this.props.dataDetail[detail]}</span>;
})
or
Object.keys(this.props.dataDetail).map(function(detail, id) {
return (
<div>
<span key={id}>{this.props.dataDetail[detail]}</span>
<span key={id}>{this.props.dataDetail[detail]}</span>
... // many items
</div>
);
})
It looks like you're trying to return multiple elements in your JSX. Try to wrap your li elements in React.Fragment
Object.keys(singleproductdetails).forEach(function eachKey(key) {
return (
<React.Fragment>
<li className="about-title"><label>{key} </label><span>:</span></li>
<li><p>{singleproductdetails[key]} </p></li>
</React.Fragment>
)
}
)
What i want to do is make the items of the list clickable so that once i click on one of them it redirects me to another component for example if i am in /Answers i want to be redirected to /Answers/idOfitemClicked. How can i do that?
Here is the code of my render method:
render() {
const quesItems = this.state.questions.map((question, i) => {
return (
<li key={this.props.account.id === question.expID}>{question.description}
{question.senderID}</li>
);
});
return (
<div>
<h1> Answer the questions here!</h1>
<ul>
{quesItems}
</ul>
</div>
);
}
In your HTML, try having an href=/Answer/idOfItemClick in the item you are trying to make "clickable". In this case <ul>
Simply use html link element with href:
const quesItems = this.state.questions.map((question, i) => {
return (
<li key={this.props.account.id === question.expID}>
<a href={'/Answer/' + question.id}>
{question.description} {question.senderID}
</a>
</li>
);
});
How do I join a link http://image.tmdb.org/t/p/w185/ and {item.backdrop_path}, which provides the rest of the link?
For example in the end it should look like: http://image.tmdb.org/t/p/w185/bcRFf5Qmw4XotFYAfj8fCS8PJy5.jpg
this is the code itself:
export default class MoviesSearch extends Component {
render() {
const {movieprop} = this.props;
return (
<ul className = "col-md-4 list-group">
{
movieprop && movieprop.slice(0,5).map((item ) =>
<li key={item.id}>
<h4>name:{item.title }</h4>
<p>release date: {item.release_date}</p>
<p>vote: {item.vote_average}</p>
<img src="http://image.tmdb.org/t/p/w185{item.backdrop_path}"/> //NOT WORKING
</li>
)
}
</ul>
)
}
}
Right now it works fine for title, release date and vote, but I can not get the url. The data is from themoviedb:
http://api.themoviedb.org/3/discover/movie?certification_country=US&certification=R&sort_by=vote_average.desc&api_key=79eb5f868743610d9bddd40d274eb15d
Please let me know if my explanation is horrible and I need to provide more information.
You are looking to concatenate a string in JSX? Here's how:
<img src={"http://image.tmdb.org/t/p/w185" + item.backdrop_path} />
Alternatively, in ES6 you can use Template Literals, like this:
<img src={`http://image.tmdb.org/t/p/w185${item.backdrop_path}`} />
A simple demo of the result, here. (Inspect the element to see the src url.)