write javascript code inside react return

Question

I have this:

return (
          <select
            onInput={(e) => onTyping(e.target.name, e.target.value)}
            name="site"
            id="site"
            onChange={handleInputChange}
            >
                <option value={myData.site}>{myData.site}</option>
                <option value="MAR">MARKHAM</option>
                <option value="OTT">OTTAWA</option>
          </select>

)

and I want to write a script inside of it that allows me do conditional displaying, but it won't let me. how can I do this?

Conditional display of what? What isn't letting you? Please provide more context and a minimal example for what you are trying to do. If there are errors, include them. If you've debugged, include what you've done. If there are steps to reproduce your issue, include them. — Drew Reese, Sep 01 '21 at 23:32

Vincent M · Answer 1 · 2021-09-01T23:32:14.840

You can conditionally render an element using ternary or logical operators inside of curly brackets

<option value={myData.site}>{myData.site}</option>
{myData.site.toLowerCase() === 'mar' && <option value="MAR">MARKHAM</option>}
{myData.site.toLowerCase() === 'ott' && <option value="OTT">OTTAWA</option>}

Or you can write your if statements and for loops to create and store your elements in variables above the return statement, and then reference the variables in the return statement.

write javascript code inside react return

1 Answers1