React how to use data.props content to do conditional rendering-CodePudding

I have a small question but I can't figure out how to perform it and how to find an other related post. Basically I want to display the instagram part only if there is {d.socials2}, otherwise I want to skip it :

<div id='row'>
      {props.data
        ? props.data.map((d, i) => (
            <div key={`${d.name}-${i}`} className='col-md-3 col-sm-6 team'>
              <div className='thumbnail'>
                {' '}
                <img src={d.img} alt='...' className='team-img' />
                <div className='caption'>
                  <h4>{d.name}</h4>
                  <p>{d.job}</p>
                  <p>Twitter:<a href={`https://twitter.com/${d.socials1}`}>{d.socials1}</a></p>
                  {d.socials2.length > 0 &&
                    <p>Instagram:<a href={`https://www.instagram.com/${d.socials2}`}>{d.socials2}</a></p>
                  }
                </div>
              </div>
            </div>
          ))
        : 'loading'}
    </div>

How can I do that ?

CodePudding user response：

You can do it like this:

{
  !!d.socials2 && (
    <p>
      Instagram:
      <a href={`https://www.instagram.com/${d.socials2}`}>{d.socials2}</a>
    </p>
  );
}