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

Question

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>

)

Yevhen Horbunkov · Accepted Answer · 2020-05-15 21:42:57Z

2

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)} />

answered May 15, 2020 at 21:42

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

neutrino Over a year ago

what do you mean by "appropriate parameter'?

Yevhen Horbunkov Over a year ago

@VP9 : In your particular case - input value

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related