1
votes

Comment rendre un objet à partir de la carte au lieu de tous?

J'ai un objet de profil dans l'état de mon application react, qui contient un tableau de 6 objets.

Je veux pouvoir rendre ces objets séparément.

      {
         this.state.profiles.map(profile => (
            <div key={profile.mainCompanyID}>
               {profile.name}
               {profile.description}
            </div>
          ))
      }

Le code ci-dessus affichera les 6 noms / descriptions. Mais je veux pouvoir mapper uniquement à travers l'un des objets du tableau, pas tous.

Des idées?

reactjs

5 commentaires

comme si vous voulez renvoyer uniquement la correspondance avec l'ID ou quelque chose

Ouais ça marcherait!

vous devez utiliser le filtre au lieu de la carte pour renvoyer l'objet uniquement en l'utilisant id

@Abal Avez-vous un exemple?

Si vous ne voulez rendre que l'un des 6, je vous suggère d'utiliser find au lieu de filtre.

4 Réponses :

4
votes

filtre le tableau avant map

renderBasedOnId = id =>{
    const { profiles } = this.state
    return profiles.filter(x => x.id === id).map(item => <div>{item.name}</div>)
}

render(){
    return this.renderBasedOnId(this.state.selectedId) //just an example of usage
}

0 commentaires

2
votes

d'accord, vous pouvez le faire de cette façon

 {
     this.state.profiles.map(profile => {
        if (profile.mainCompanyID === id) { // id you want to match to
          return (
        <div key={profile.mainCompanyID}>
           {profile.name}
           {profile.description}
        </div>)
        } else {
            return null
           }
      })
  }

J'espère que cela vous aidera

0 commentaires

3
votes

Vous pouvez filtrer les données, puis appliquer la carte .

Exemple de travail - https://codesandbox.io/s/funny-shirley-q9s9j

Code -

function App() {
  const profileData = [
    { id: 1, name: "Tom" },
    { id: 2, name: "Dick" },
    { id: 3, name: "Harry" },
    { id: 4, name: "Nuts" }
  ];

  const selectedProfile = profileData.filter(x => x.name === "Harry");
  return (
    <div className="App">
      <h1>Test Filter and map in jsx</h1>
      {selectedProfile.map(x => (
        <li>
          {x.id} - {x.name}
        </li>
      ))}
    </div>
  );
}

0 commentaires

2
votes

{ this.state.profiles.map((profile, key) => {
    (key===0)
     ?
     return(
       <div key={profile.key}>
         <p>Name:{profile.name}</p>
         <p>Description:{profile.description}</p>
       </div>
     )
     :
     return null;
     })
}

0 commentaires