I want to render a different image depending on my value of the project traffic light status. This could be red, yellow or green. If the status is green, I show green and so on.

I don't know where I can write my function and how to use the image URL.

Here is my code so far:

public componentDidMount(): void {
let reactcontexthandler = this;
   console.log("Link zur Seite:" + Webpartprojectsw.websiteurl);
        url: `${Webpartprojectsw.websiteurl}/_api/web/lists/getbytitle('ProjectStatusList')/items(1)?$select=Title,ID,StartDate,EndDate,TrafficLight,ProjectPhase/Title&$expand=ProjectPhase`,
        type: "GET",
        headers: {'Accept':'application/json;odata=verbose;'},
        success: function (resultData){
          ProjectItem: resultData.d
        error: function (jqXHR,textStatus,errorThrown){




public render(): React.ReactElement<IWebpartprojectswProps> {

  const light = this.calculateLight();

return (

   <div className={styles.container}>
     <div> {this.state.ProjectItem.Id}</div> 

      <div> {this.state.ProjectItem.Title}</div>  
       <div>  {this.state.ProjectItem.StartDate}</div>
       <div> {this.state.ProjectItem["ProjectPhase"]["Title"]}</div>
       <div> {this.state.ProjectItem.TrafficLight}</div>


Do I need to write my function within the render function or somewhere else?

  • Where are the image URLs stored, in same list? Commented Jun 6, 2022 at 13:19
  • Yes, all the pictures are stored in the same SP Library. Only the ending is different e.g. Green.png etc.
    – Matthias
    Commented Jun 6, 2022 at 13:25
  • You can use Conditional rendering for your requirements. Create an <img> tag in render method & set src attribute with image URL. Commented Jun 6, 2022 at 13:35


Your Answer

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