CODEWITHSUNDEEP
javascriptreactjs
neutrino
neutrino

Reputation: 924

What is the simplest way to have form input set function variable in React JS?

How can I have a user set a function variable with an input number? I have a form they can enter a number into, but this needs to set the col var up top.

function DataFrame(){

  var element = <li class="element"/>

  var col <- the variable to be set by the form

  var arr = []
  var i
  for (i = 0; i<row; i++){
    arr.push(element)
  }

  const [toggle, setToggle] = React.useState(false);

  const Element = () => <li className="element" />;

  return (

    <div>
      <div >
        <form>
          <label>
          input code:
            <input type="number" name="dimension" />
          </label>
            <input type="submit" value="Submit" />
        </form>
      <div >
    </div>

)

Upvotes: 0

Views: 57

Answers (1)

Yevhen Horbunkov
Yevhen Horbunkov

Reputation: 15530

You may store it within local component's state (setting its initial value to some default one, e.g. 0):

const [col, setCol] = useState(0)

Then, upon input keyUp event, you may modify col by calling setCol with appropriate parameter:

<input type="number" name="dimension" onKeyUp={e => setCol(e.target.value)} />

Upvotes: 2

Related Questions