How to store the return value of a function inside a variable in reactJS

Question

my code:

import "./styles.css";

export default function App() {

  getUserValue = (e) => {
    let value = e.target.value;
    console.log(value)
    return value
  }

  let userInputValue = getUserValue



 return (
    <div>
      <div>
        <h4>Sign Up</h4>
      </div>
          <div>
            <div>
                <p>Username</p>
                <input  onChange = {getUserValue}/> 
            </div>
            <div >
                <p>Password</p>
                <input/> 
            </div>
          </div>
          <div> 
            <button onClick = {console.log(userInputValue)}>Submit</button>
          </div>
      <div>
        <button>
          Close
        </button>
      </div>
  </div>
  );
}

code sandbox: https://codesandbox.io/s/dazzling-sea-my5qm?file=/src/App.js:0-720

I'm trying to store the returned value of "getUserValue" function to "userInputValue" variable so I can log the input the user made and use it in different functions. I can't get it to work though, when I console log the variable hoping to get the returned result after I made an input I don't get anything, as if the button doesn't work.

Answer 1

I'm trying to store the returned value of "getUserValue" function to "userInputValue" variable so I can log the input the user made and use it in different functions.

You'd do that by making the input state in your component. In a function component like yours, that means using the useState hook (or various libraries like Redux that have alternative ways of doing it).

Here's a simple example, but you can find lots of more complex ones by searching:

 const { useState } = React; function Example() { // Call the hook to get the current value and to // get a setter function to change it. The default // value ("" in this example) is only used the first // time you call the hook in this component's lifecycle const [userInput, setUserInput] = useState(""); // Handle changes in the input by setting state. // Note that this function is recreated every time your // component function is called to update. That's mostly // fine, but there are times you might want to optimize // that. const onChange = (event) => { setUserInput(event.currentTarget.value); }; // Handle clicks on the button that show' the current input. const onClick = () => { console.log(`The current userInput is "${userInput}"`); }; // Return the rendering information for React return <div> {/* Provide the value and hook the "change" (really "input") event */} <input type="text" value={userInput} onChange={onChange} /> <input type="button" onClick={onClick} value="Show Current" /> </div>; } ReactDOM.render(<Example />, document.getElementById("root"));

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>