How to properly store and display multiple elements from state?

Question

React

I'm trying to make a state with many<UserRow/>

//через loop множество UserRow загружаю
that.setState( {user_row: that.state.user_row+<UserRow/>} );
//Выводит так [object Object][object Object][object Object]

If one element is set, then everything is normally displayed
that.setState( {user_row: <UserRow/>} );
How to implement this correctly?

Answer 1

"+" is a string addition or concatenation operator, so each of the objects is converted to a string. If toString()the object method is not defined, the string will be "[objectObject]".
Instead, create an array, fill it in a loop, and paste it as is. You will need to add a unique value for the "key" property to each element, otherwise React may swear. See the React documentation on Dynamic Children .

render() {
  var i, rows = [];
  for(i=0;i<N;i++) { rows.push( <UserRow key={ i } /> ); }
  // .. 
  return (
    <div>
        { rows }
    </div>
  );
}

state to use in your case, most likely, is not necessary at all.