Passing data from an input button click?

Question

I am new to React. I am just playing around with passing values around. I am confused what I am doing wrong with the button click. I want that to check the value from the input and to generate a random number. Here is my code:

 export default function Random() { const [state, setState] = useState({ start: "", final: "" }); let handleClick = (e) => { setState({ start: e.target.value, final: Math.floor(Math.random() * state.start) + 1 }); }; return ( <div> <h1>Randomizer based off your number</h1> <input onChange={handleClick} type="number" /> <button onClick={handleClick}>Random number</button> <h4>{`You entered ${state.start} and the random number is ${state.final}`}</h4> </div> ); }

Robert May · Accepted Answer · 2022-04-04 19:11:05Z

The e referenced in e.target.value is referring to the event. This should work for your onChange handler, as the target of the event is the <input />. However, when clicking the button, the target of the event is the <button />. Therefore e.target.value will attempt to read the value of the button, rather than the value of the input.

If you want to read the value of the input, try using a ref:

export default function Random() { const input = useRef(); const [state, setState] = useState({ start: "", final: "" }); let handleClick = () => { setState({ start: input.current.value, final: Math.floor(Math.random() * state.start) + 1 }); }; return ( <div> <h1>Randomizer based off your number</h1> <input onChange={handleClick} type="number" ref={input} /> <button onClick={handleClick}>Random number</button> <h4>{`You entered ${state.start} and the random number is ${state.final}`}</h4> </div> ); }

Or if you want the button to use a random number, try this:

let handleClick = (e) => { setState({ start: e.target.value || Math.random(), final: Math.floor(Math.random() * state.start) + 1 }); };

Collectives™ on Stack Overflow

Passing data from an input button click?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related