Javascript

react functions and state

Normal function

function logRandom() {
    console.log(Math.random());
}

function Button() {

 const [count, setCounter] = useState(0);
 return <button onClick={logRandom}>{counter}</button>;
}

inline function

function Button() {

 const [count, setCounter] = useState(0);
 return <button onClick={

  function logRandom() {
      console.log(Math.random());
  }

 }>{counter}</button>;
}

inline arrow function definition

function Button() {

 const [count, setCounter] = useState(0);
 return <button onClick={() = > console.log(Math.random())}>{counter}</button>;
}

Passing Props

function Button(props) {
  const handleClick = () => props.onClickFunction(props.increment);
	return (
  	<button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

function Display(props) {
	return (
  	<div>{props.message}</div>
  );
}

function App() {
	const [counter, setCounter] = useState(0);
  const incrementCounter = (incrementValue) => setCounter(counter+incrementValue);
	return (
    <div>
      <Button onClickFunction={incrementCounter} increment={1} />
      <Button onClickFunction={incrementCounter} increment={5} />
      <Button onClickFunction={incrementCounter} increment={10} />
      <Button onClickFunction={incrementCounter} increment={100} />
      <Display message={counter}/>
    </div>  
  );
}

ReactDOM.render(
  <App />, 
  document.getElementById('mountNode'),
);