web-dev-qa-db-fra.com

Comment rendre un tableau d'objets dans React?

pourriez-vous s'il vous plaît dites-moi comment faire pour afficher la liste dans react js. J'aime ça

https://plnkr.co/edit/X9Ov5roJtTSk9YhqYUdp?p=preview

class First extends React.Component {
  constructor (props){
    super(props);

  }

  render() {
     const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>;

    return (
      <div>
      hello
      </div>
    );
  }
}
javascriptreactjsreact-router
37
user944513

Vous pouvez le faire de deux manières:

Premier:

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }

Second: Écrire directement la fonction map dans le retour

render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }
57
Shubham Khatri

https://facebook.github.io/react/docs/jsx-in-depth.html#javascript-expressions

Vous pouvez transmettre n'importe quelle expression JavaScript en tant qu'enfant, en la joignant à {}. Par exemple, ces expressions sont équivalentes:

<MyComponent>foo</MyComponent>

<MyComponent>{'foo'}</MyComponent>

Ceci est souvent utile pour rendre une liste d'expressions JSX de longueur arbitraire. Par exemple, cela rend une liste HTML:

function Item(props) {
  return <li>{props.message}</li>;
}

function TodoList() {
  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
  return (
    <ul>
      {todos.map((message) => <Item key={message} message={message} />)}
    </ul>
  );
}

class First extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [{name: 'bob'}, {name: 'chris'}],
    };
  }
  
  render() {
    return (
      <ul>
        {this.state.data.map(d => <li key={d.name}>{d.name}</li>)}
      </ul>
    );
  }
}

ReactDOM.render(
  <First />,
  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>
9
DTing

La réponse de Shubham explique très bien. Cette réponse s’ajoute à celle-ci afin d’éviter certains pièges et de refactoriser une syntaxe plus lisible.

Pitfall: Il y a une idée fausse commune dans le rendu d'un tableau d'objets, en particulier s'il y a une action de mise à jour ou de suppression effectuée sur les données. Le cas d'utilisation serait comme supprimer un élément de la ligne du tableau. Parfois, lorsque la ligne qui doit être supprimée n'est pas supprimée et que l'autre ligne est supprimée.

Pour éviter ceci, utilisez key prop dans l'élément racine qui est bouclé dans l'arborescence JSX de .map(). Ajouter également Fragment de React évitera d'ajouter un autre élément entre ul et li lors du rendu via une méthode appelante.

state = {
    userData: [
        { id: '1', name: 'Joe', user_type: 'Developer' },
        { id: '2', name: 'Hill', user_type: 'Designer' }
    ]
};

deleteUser = id => {
    // delete operation to remove item
};

renderItems = () => {
    const data = this.state.userData;

    const mapRows = data.map((item, index) => (
        <Fragment key={item.id}>
            <li>
                {/* Passing unique value to 'key' prop, eases process for virtual DOM to remove specific element and update HTML tree  */}
                <span>Name : {item.name}</span>
                <span>User Type: {item.user_type}</span>
                <button onClick={() => this.deleteUser(item.id)}>
                    Delete User
                </button>
            </li>
        </Fragment>
    ));
    return mapRows;
};

render() {
    return <ul>{this.renderItems()}</ul>;
}
0
Meet Zaveri