This question already has an answer here:
forEach() in React JSX does not output any HTML
(1 answer)
Closed last year.
I'm trying to print JSON data (this) in React. I came to this:
const print = data.forEach(e => {
e.data.map(el => {
return(
<li>{el.account_id}</li>
)
})
});
return (
<div>
<ul>
{print}
</ul>
</div>
);
Yet it doesn't work (when i do console.log(el.account_id) it logs everything, but doesn't display the data in the ul). What am i doing wrong?
EDIT:
const print = data.map(e => {
return e.data.map(el => {
return(
<li>{el.account_id}</li>
)
})
});
return (
<div>
<ul>
{print}
</ul>
</div>
);
is the correct way to do it.
You're very close. forEach does not return anything. Use map.
You probably want something closer to this:
const print = data.map(record => (
<div key={record.meta.page}>
<h3>PAGE: {record.meta.page}</h3>
<ul>
{record.data.map(item => {
return (<li key={item.account_id}>{item.account_id}</li>)
})
}
</ul>
</div>
))
return (
<div>
{print}
</div>
)
const print = data.map(el => {
return(
<li>{el.account_id}</li>
)
})
return (
<div>
<ul>
{print}
</ul>
</div>
);
you dont need the forEach
Related
I'm trying to do conditional rendering in React (only maps and renders when props exist).
render() {
if (this.props.res) {
return(
<div>{this.props.res.map(item => <li key={item.id}>{item.subreddit}</li>}</div>
)
} else {
return null
}
}
But I have this error:
Parsing error: Unexpected token, expected ","
Why is that, and how can I fix it? Or in another way, is there a better way to achieve my purpose?
There is syntax error, map(...) doesn't have closing parenthesis.
It should be:
<div>{this.props.res.map(item => <li key={item.id}>{item.subreddit}</li>)}</div>
Here are the issues I see:
map is missing the closing parenthesis
check the array length (an empty array will return true otherwise)
list items should be wrapped with an appropriate tag, such as <ul/>
render() {
const { res } = this.props;
return !res.length ? null : (
<ul>{res.map(item => <li key={item.id}>{item.subreddit}</li>)}</ul>
);
}
there was a brace missing in the end of the map.
render() {
return (
<div>
{
this.props.res && this.props.res.map(item => (
<li key={item.id}>{item.subreddit}</li>
))
}
</div>
);
}
render() {
if (this.props.res) {
return (
<div>
{this.props.res.map(item => (
<li key={item.id}>{item.subreddit}</li>
))}
</div>
);
} else {
return null;
}
}
I couldn't understand why...here is the GitHub repository: https://github.com/Dronrom/React-test
That’s because you initialized peopleList as null in your component. So map works only on arrays so you need to check peopleList whether its really an array before doing map on it so
Change
renderItems(arr) {
return arr.map(({id, name}) => {
return (
<li className="list-group-item"
key={id}
onClick={() => this.props.onItemSelected(id)}>
{name}
</li>
);
});
}
To
renderItems(arr) {
if(arr){
return arr.map(({id, name}) => {
return (
<li className="list-group-item"
key={id}
onClick={() => this.props.onItemSelected(id)}>
{name}
</li>
);
});
}
}
I think your issue may be that react renders once before componentDidMount(). This is an issue because your calling map on arr which is null. const { peopleList } = this.state; you set people list to your current state which you set as default to be null, state = {peopleList: null}; then you later call this.renderItems(peopleList); which people list is still null at this moment so you are getting the Cannot read property 'map' of null error.
I belive something like componentWillMount is what you need instead. I recommend looking at this post which has a similar issue of react life cycle methods. React render() is being called before componentDidMount()
the answer is very simple: the type of the input isn't array type, it might be null or undefined. so that it doesn't have .map function.
How to fix:
Make sure your input must be array type before call renderItems().
render(){
const { peopleList } = this.state;
const items = (peopleList && peopleList.length) ? this.renderItems(peopleList) : null;
return(
<ul className="item-list list-group">
{items}
</ul>
);
}
Or:
Make sure your input must be array type before do mapping:
renderItems(arr) {
return !arr ? null : arr.map(({id, name}) => {
return (
<li className="list-group-item"
key={id}
onClick={() => this.props.onItemSelected(id)}>
{name}
</li>
);
});
{product.size?.map(c=>(
<FilterSizeOption key={c}>{c}</FilterSizeOption>
))}
Wrapping the return statement with a if statement worked for me
So changed
return (
<div>
<Navbar />
{countries.map((country, i) => {
return (
<div>
<span key={`${country.name.common}${i}`}>
{country.name.common}
</span>
</div>
);
})}
</div>
);
to this
if (countries) {
return (
<div>
<Navbar />
{countries.map((country, i) => {
return (
<div>
<span key={`${country.name.common}${i}`}>
{country.name.common}
</span>
</div>
);
})}
</div>
);
}
I'm having some difficulty with rendering using .map. What I'm trying to do is to render the artist name, the song title, and a link to a page where you can find sheet music. I have a separate state for each one of these categories and it looks like this:
this.state = {
currentSearch: "",
artistName: [],
songTitle: [],
tabId: [],
}
Here is my render:
render(){
return(
<div>
{this.props.artist.map((artist, i) =>{
return(
<h3>{artist}</h3>
)
})}
{this.props.title.map((title, i) => {
return (
<h3>{title}</h3>
)
})}
{this.props.link.map((link, i) => {
return (
<h3>{link}</h3>
)
})}
</div>
)
}
The main problem that I'm having is that the information will display on the page like this:
The Beatles
The Beatles
The Beatles
All You Need Is Love
Blackbird
Twist and Shout
www.allyouneedisloveurl.com
www.blackbirdurl.com
www.twistandshouturl.com
Is there a way I can map these so that they appear one after the other like this?
The Beatles
All You Need Is Love
www.songurl.com
Thank you!!
You can use the index to render the other data. Try
render(){
return(
<div>
{this.props.artist.map((artist, i) =>{
return(
<div key={i}>
<h3>{artist}</h3>
<h3>{this.props.title[i]}</h3>
<h3>{this.props.link[i]}</h3>
</div>
)
})}
</div>
)
}
You can put them all together in one map like this:
render(){
return(
<div>
{
this.props.artist.map((artist, i) =>{
return(
<div key={i} className="artist">
<h3>{artist}</h3>
<h3>{this.props.title[i]}</h3>
<h3>{this.props.link[i]}</h3>
</div>
)
})
}
</div>
)
}
Is there anything wrong with my code below?
render(){
return (
var users= this.state.users.map(user =>
<li key={user.id}>user.name</li>
)
<ul>{users}</ul>
)
}
I get error: unexpected token.
render() should return only a single element:
render(){
return (
<ul>
{
this.state.users.map(user => (
<li key={user.id}>{user.name}</li>
)
}
</ul>
);
}
It is not clear what you're returning in your code. Either do all logic above your return call, as shown below, or do like Ori Drori does in their answer.
render() {
var users= this.state.users.map(user =>
<li key={user.id}>{user.name}</li>
);
return <ul>{users}</ul>;
}
}
Trying to create a li in react but failed. Error is near the map(), I got error of i is not defined, why?
const TodoItems = React.creatClass({
getInitialState() {
return {
items : [
{id:1,name:"Gym"},
{id:2,name:"Jump"},
{id:3,name:"Racing"}
]
}
},
renderItem(){
return(
<ul>
this.state.items.map(item,i =>
<li key={i}>item.name</li>
)
</ul>
)
},
render(){
return (
<renderItem />
)
}
})
When you have multiple arguments for an arrow function, you need to put () around them. So:
this.state.items.map((item,i) =>
// ------------------^------^
<li key={i}>item.name</li>
)
Your original code calls map with item as its first argument, and an arrow function taking a single argument (i) as its second argument.
You also need to put item.name in {} and put the call to map in {}:
renderItem(){
return(
<ul>
{this.state.items.map((item,i) =>
<li key={i}>{item.name}</li>
)}
</ul>
)
Then it works:
const { Component } = React;
const { render } = ReactDOM;
const TodoItems = React.createClass({
getInitialState() {
return {
items : [
{id:1,name:"Gym"},
{id:2,name:"Jump"},
{id:3,name:"Racing"}
]
}
},
renderItem(){
return(
<ul>
{this.state.items.map((item,i) =>
<li key={i}>{item.name}</li>
)}
</ul>
)
},
render(){
return this.renderItem();
}
});
render(<TodoItems /> , document.getElementById('items'));
<div id="items"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
That became clear to me when I used Babel's REPL to compile the JSX and realized I was seeing "this.state.map((item,i) =>" as a string.
try this :
renderItem(){
return(
<ul>
{this.state.items.map((item,i) => {
return(
<li key={i}>item.name</li>);
})}
</ul>
)