Call a function dependent on the value inside an array with SPFx and react

Question

I coded a template that pushes values from a SharePoint List into an array. I want to change the image inside the array depending on a value that is inside an array.

The value should function like a traffic light function. So if the value is "Green", the template should use a green traffic light image. If "Yellow" then a yellow image.

Here is my code so far:

public render(): React.ReactElement<IWebPartPoCswProps> {
    const {
      description,
      isDarkTheme,
      environmentMessage,
      hasTeamsContext,
      userDisplayName
    } = this.props;
    
    let project =[];
    
    this.state.ProjectFilterItem.forEach((item:IListItem)=> project.push(
       
      <div className={styles.containerGrid}>
        
        <div className={styles.ProjectTitleHeader}>item 1 {item.Title}</div>
        <div className={styles.ProjectStatusTrafficLight}>item 2 TrafficLight {item.TrafficLight?.Title}</div>
        <div className={styles.ProjectStartdate}>item 3 {item.StartDate}</div>
        <div className={styles.ProjectEnddate}> item 4 {item.EndDate}</div>
        <div className={styles.ProjectStatus}>item 5 {item.ProjectStatus?.Title}</div>
        <div className={styles.ProjectPhase}>item 6 {item.ProjectPhase?.Title}</div>
      </div>
    ))
  

    return (
      <section className={`${styles.webPartPoCsw} ${hasTeamsContext ? styles.teams : ''}`}>
        <div className={styles.welcome}>
          <h2>Well done, {escape(userDisplayName)}!</h2>
          <div>{environmentMessage}</div>
          <div>Web part property value: <strong>{escape(description)}</strong></div>
        </div>
 
      
        <div>
           {this.state.ProjectFilterItem[0].TrafficLight.Title.toString()}
          
          {project}
        </div>
       
      </section>
    
     );
    }
}

I can't read the value of the TrafficLight array position. Maybe you can help me. e.g.

If (ValueTrafficlight =="Green"){
      valueLight="Green url"
}

Answer 1

You can use conditional rendering in template like this:

{
    if (item.TrafficLight && item.TrafficLight.Title == "Green") {
        return <img src="green.jpg" />
    } else if (item.TrafficLight && item.TrafficLight.Title == "Yellow") {
        return <img src="yellow.jpg" />
    } else {
        return <img src="red.jpg" />
    }
}

You can change the image URLs as per your requirements.

Check below links for conditional rendering in react:

1. Conditional Rendering
2. Conditional Rendering in React
3. 7 Ways to Implement Conditional Rendering in React Applications