CODEWITHSUNDEEP
javascriptreactjs
momomo
momomo

Reputation: 319

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

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.

Upvotes: 1

Views: 4763

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075785

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>

Upvotes: 1

Related Questions