0

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"
}
4
  • Is TrafficLight of type array? Is it nested inside ProjectFilterItem? Sep 26, 2022 at 13:41
  • Yes. You can get the value from this line: {item.TrafficLight?.Title} here is the value Green, Yellow or Red
    – Matthias
    Sep 26, 2022 at 13:50
  • Then what is the problem exactly? Are you unable to use If (item.TrafficLight && item.TrafficLight.Title == "Green"){ }. From where the image URL will be coming, dynamically or static URLs hard coded? Sep 26, 2022 at 13:55
  • I don't know how to use conditional rendering in my template. That's my problem.
    – Matthias
    Sep 26, 2022 at 14:00

1 Answer 1

0

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
4
  • That's not working for me. I needs to be different, but still figure out how.
    – Matthias
    Sep 27, 2022 at 7:21
  • Can you explain in details how you want it? Reference links in my answer does not help you with conditional rendering? There are multiple ways to achieve conditional rendering in react, read the articles in above links once. Sep 27, 2022 at 7:29
  • Is it working for you now? You can also try switch or ternary operator approach from 3rd link in my answer. let me know if you still need help with this. Sep 27, 2022 at 13:54
  • Please update this thread, is it working for you now? Aug 3, 2023 at 11:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.