is it possible to write an es6 onChange arrow function? - ecmascript-6

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>