Trying to use the state variable in a map function in React

const [measure, setMeasure] = useState("us");


   {recipe.map((d) => {
        return (
          <ul>
            <li>
              {d.measures.${measure}.amount}{d.name}
            </li>
          </ul>
        );
      })}

I’m new to React and currently trying to do a map function that makes use of a state variable that is being declared (and can be changed with useState). My codes are as above but it does not work. Any advice and help would be greatly appreciated!

In what way doesn’t it work?

What is this trying to do?

 {d.measures.${measure}.amount}{d.name}

Is “us” the key you are using? Are you expecting this

 {d.measures.${measure}.amount}

to evaluate to:

 {d.measures.us.amount}

Then you would need to use bracket notation:

 {d.measures[measure].amount}

This is a JS issue, not specific to React. You were trying to use the notation for string template literals. That doesn’t work for accessing object properties. You need either dot or bracket notation.

1 Like

Thanks mate for the explanation. The code works now.