CODEWITHSUNDEEP
reactjs
BennKingy
BennKingy

Reputation: 1583

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

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?

Upvotes: 2

Views: 1288

Answers (4)

Prakash Sharma
Prakash Sharma

Reputation: 47

{ 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;
     })
}

Upvotes: 2

swapnesh
swapnesh

Reputation: 26732

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

Upvotes: 3

ibtsam
ibtsam

Reputation: 1720

okay you can do it this way 

 {
     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
           }
      })
  }

Hope it helps

Upvotes: 2

Dupocas
Dupocas

Reputation: 21317

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
}

Upvotes: 4

Related Questions