How to render one object from map instead all of them?

Question

I have a profile object in the state of my react app, which contains an array of 6 objects.

I want to be able to render these objects separately.

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

The code above will display all 6 names/descriptions. But I want the power to be able to only map through one of the objects in the array, not all of them.

Any ideas?

Answer 1

filter the array before 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
}

Answer 2

You can filter out the data and then apply map.

Working Example - 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>
  );
}