React - iterating over key value pairs in array
Question
I cant get this snippet to output tacos
im not sure what I am doing wrong
let tacos = [{ John: "Guacamole" }, { Sally: "Beef" }, { Greg: "Bean" }];
class Parent extends React.Component {
render() {
return (
<div className="parent-component">
<h3>List of tacos:</h3>
<TacosList tacos={tacos} />
</div>
);
}
}
class TacosList extends React.Component {
render() {
return (
<div className="tacos-list">
{this.props.tacos.map((taco) => {
return
<Parent taco={taco}/>
})}
</div>
);
}
}
render(<Parent />, document.getElementById("root"));
3 answers
solution1
2 ACCPTED 2017-10-09 01:02:10
Your problem is that you are breaking into a new line in after which it's returning while iterating the tacos list. 之后插入新行，而在迭代tacos列表时返回 。
Furthermore, You will create an infinite loop rendering if you call inside 调用 ，则将创建无限循环渲染。
Either you create a new component to render the items or you do it within the component 组件内进行操作
let tacos = [{ person: "John", ingredient: 'Guacamole' }, { person: 'Sally', ingredient: 'Beef' }, { person: 'Greg', ingredient: 'Bean' }]; class Parent extends React.Component { render() { return ( <div className="parent-component"> <h3>List of tacos:</h3> <TacosList tacos={tacos} /> </div> ); } } class TacosList extends React.Component { render() { return ( <div className="tacos-list"> {this.props.tacos.map((taco, index) => ( <p key={index}>{taco.person}: {taco.ingredient}</p> ))} </div> ); } } ReactDOM.render(<Parent />, document.getElementById("root"));
<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> <div id="root"> </div>
solution2
1 2017-10-09 00:29:26
The problem is
<Parent taco={taco}/>
First parent is not expecting a taco property.
Second I think you intend to actually render the elements to display the taco information there, not a Parent component for each taco.
solution3
0 2017-10-09 00:53:26
Start up with creating an atomic component (div, span or IMG) to show the tacos list, in TacosList .
The map in TacosList will work only at the first level, because every item is a JavaScript object, which means you have to know the key, to have the value, or use Object.keys and Object.items to show names.
solution4
0 2017-10-09 01:02:59
Well, you are doing many things wrong. First I don't understand why you have first names as key in your objects, but never mind. Second, you should use state for storing and manipulating data as there is setState({}) function which updates DOM on state change, you can find many great tutorials online. Then why would you call Parent component from Child component? :) silly but here is solution so you can have idea how it works and move on.
class TacosList extends React.Component { render() { return ( <div className="tacos-list"> {this.props.tacos.map((taco) => { return <h1> {taco.ingredient} </h1> })} </div> ); } } class Parent extends React.Component { constructor(props){ super(props) this.state = { tacos: [{ ingredient: "Guacamole" }, { ingredient: "Beef" }, { ingredient: "Bean" }] } } render() { return ( <div className="parent-component"> <h3>List of tacos:</h3> <TacosList tacos={this.state.tacos}/> </div> ) } } ReactDOM.render(<Parent />, document.getElementById("root"));
<!DOCTYPE html> <html> <head> <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> </head> <body> <div id="root"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.