is it possible to write an es6 onChange arrow function?

Question

What's the correct syntax for the onChange es6 function?

function myEvent(e){
console.log(e.target)
}

<select onChange=(event)=>{console.log(event.target)}>
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>


<select onChange={console.log(event.target)}>
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>


<select onChange="myEvent(event)">
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

<select onChange=function(){console.log("hello"))>
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

Answer 1

I was just wondering if it was possible to have a multi line function embedded in the html. Appears the answer is n

You can. The value of the on* attributes become the body of a function. Therefore you can define a function inline but you also have to call it.

For example:

<select onChange="function foo(){
  console.log('hello')
}
foo();">
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

<!-- as IIFE -->
<select onChange="(function(){console.log('hello')}())">
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

<!-- of course that works with arrow functions too -->
<select onChange="(() => {console.log('hello')
                           console.log('goodbye')})()">
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

Answer 2

Try sending the event as a parameter to the js function and use it there

const onChangeHandler = (e) => {
  const selectedValue = e.target.value;
  console.log(selectedValue)
}

<select onChange="onChangeHandler(event)">
  <option value="5"> 5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

Answer 3

Inline javascript context you can do ARROW Function

<select onchange="(() => console.log(event.target.value))()">

REACTJS Context check curly braces and event.target.value

<select onChange={(event) => console.log(event.target.value) }>
        <option value="5"> 5</option>
        <option value="10">10</option>
        <option value="15">15</option>
</select>

<select onChange={(event) => {console.log(event.target.value)} }>
        <option value="5"> 5</option>
        <option value="10">10</option>
        <option value="15">15</option>
</select>

Answer 4

This is not an actual answer but a demonstration that the task at hand can be done in a much easier way.

document.body.onchange=e=>{
  console.log(e.target.value)
}

<select>
  <option> 5</option>
  <option> 6</option>
  <option>15</option>
</select>

<select>
  <option> 5</option>
  <option> 7</option>
  <option>15</option>
</select>

<select>
  <option> 5</option>
  <option> 8</option>
  <option>15</option>
</select>

<select>
  <option> 5</option>
  <option> 9</option>
  <option>15</option>
</select>