How to iterate over an array in a template?

A

Alexander Ivanov2019-09-20 12:26:23

React

Alexander Ivanov, 2019-09-20 12:26:23

There is a parent component that, in rendering, passes data to the child:

render(){
        return (
            <div>
                 <Body tmp={ [this.state.body.json.result] }/> 
            </div>
            )
    }

Through the props, the child receives the data:

class Body extends React.Component{
    
    constructor(props) {
        super(props);
  
    }
   listItems(elems){
       console.log(elems[0]);
       return(
               <div>1</div>
            )
   }    
    render(){
         return(
               <div> 
                    {this.listItems(this.props.tmp )}
               </div>
            )

    }
}

TOTAL: https://codesandbox.io/embed/blissful-hofstadter-1qoud
in the child component in the listItems method - I clearly see the passed array, but I can’t display it in the template, but if I just pass a string, then it can easily be displayed in the template . How to display an array in a template? Tried through map, it doesn't work, empty values come.
I am attaching the screenshot of the array in the console, please tell me what I did wrong?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

0

0xD34F, 2019-09-20
@alexsteadfast

<Body tmp={this.state.body.json.result} />

{this.props.tmp.map(n => <div key={n._id}>{n.name}</div>)}