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

JavaScript
#1 
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!

#2

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
#3

Thanks mate for the explanation. The code works now.