I want the data from the input to be output to the console when clicked, but for some reason they are output with every change in the ipnut - Reactjs

vitaliy125
March 23, 2023
196 views
0 votes
2 Answers

function Text() {
  const [text, setText] = useState("");
  return (
    <div className="white">

input from which I need to catch information

      <input type="text" placeholder="enter" onChange={(e) => setText(e.target.value)} />
      <button onClick={console.log(text)}>CLICK</button>

      <div>{text}</div>
    </div>
  );
}

Tags: react-hooks reactjs

Answers

- Patryk
- March 23, 2023 at 3:42 pm
- 0 votes
0
You have to use arrow function in button:
```
<button onClick={() => console.log(text)}>CLICK</button>
```
Login or Signup to reply.

- AhmedSbai
- March 23, 2023 at 3:43 pm
- 0 votes
0
when you put the function like this in onClick :
```
<button onClick={console.log(text)}>CLICK</button>
```
This will make it execute each time the component rerender, however :
```
<button onClick={() => {console.log(text)}}>CLICK</button>
```
will make it execute each time the button is clicked
Login or Signup to reply.