Add value dynamically in object

Question

Suppose by selecting from drop down:

<select onChange={newfetchVendor}>
    <option value ={'narnia}>Narnia</option>
    <option value ={'simba}>Simba</option>
</select>

In function newfetchVenodr:

async function newfetchVendor(e) {
    if (!!e) {
        let bestMovie = {`{e.target.value}`:'This is a good Movie'}
                         //this throws error
    }
}

How can I set value inside bestMovie in key whatever movie is selected from dropdown?

Your JSX is invalid, your syntax for string interpolation is wrong, you needlessly cast the event to boolean instead of just checking for truthiness, and why are you checking it at all? When is your handler going to be called without an event? And why are you marking an event handler with no `await` as `async`? There's so much noise here... — Jared Smith, Feb 24 '21 at 17:49

score 1 · Answer 1 · answered Feb 24 '21 at 17:43

You need to use [] to pass the value as the property key:

async function newfetchVendor(e) {
    if (!!e) {
        let bestMovie = {[e.target.value]: 'This is a good Movie'}
    }
}

Also your options are missing ending quote. It should look like this:

<select onChange={newfetchVendor}>
    <option value='narnia'>Narnia</option>
    <option value='simba'>Simba</option>
</select>

Add value dynamically in object

1 Answers1