how to fix hook to set state in React JS?

Question

I am trying to have a user set a function variable with an input number. I have a form they enter a number into, which needs to set the col const up top.

So far, i am using a simple hook, and col is being set (i console logged it), but its not producing the desired array. Im thinking its something getting messed up in the toggling at the bottom of the code.

function DataFrame(){

  const [toggle, setToggle] = React.useState(false);
  const [col, setCol] = useState(0)
  var element = <li class="element"/>
  var row = 3
  var arr = []
  var i
  for (i = 0; i<row; i++){
    arr.push(element)
  }

  const Element = () => <li className="element" />;
  console.log(col)
  return (

    <div>
      <div >

        <div style={{fontFamily:'PressStart2P',opacity:'45%', width:'360px',
        position:'absolute',left:'36px', top: '160px',color:'rgb(143, 0, 145)'}}>
        </div>

        <div >
          <h1 class="dfHeader" style={{left:'30px'}}>
          DataFrames :<br></br></h1>
          <h1  class='dfHeader2'style={{top:'150px',left:'30px'}}>
          constructor</h1>

          <div class="codeBorder" style={{scrollbarColor:'#6a00ff'}}>
          <div class="textbox" style={{width:'180px'}}>
          <p class="instructions"></p>
          <p class="instructions2"></p>

          <p class="instructions3">
          <form class="codeForm">
            <label>
            enter dimensions:
            <input type="number" name="dimension" onKeyUp=
            {e => setCol(e.target.value)} />
            </label>
              <input class='goButton' type="submit" value="run" />
          </form>
            <br/><br/></p>
          <p class="instructions3">
          <form class="codeForm">
            <label>
            input code:
              <input type="number" name="dimension" />
            </label>
              <input class='goButton' type="submit" value="run" />
          </form></p>
          <p class="instructions3">
          <form class="codeForm">
            <label>
            input code:
              <input type="number" name="dimension" />
            </label>
              <input class='goButton' type="submit" value="run" />
          </form></p>
          <p class="instructions3">
          <form class="codeForm">
            <label>
            input code:
              <input type="number" name="dimension" />
            </label>
              <input class='goButton' type="submit" value="run" />
          </form> </p>

          </div>
          </div>

          <div class="btnConsole">
            <button class="dfButton" onClick={()=>setToggle( (prev) => (!prev) )}>
            </button>
          </div>
          </div>

          <div class="monitor"style={{}}>
          <div class="superScreen">
            <div class="screenDiv" >
              <div id="subScreen" class="subScreen">

                {[...Array(col).keys()].map(ul => (
                  <ul key={ul}>
                    {toggle &&
                      [...Array(row).keys()].map(
                        li => <Element key={li} />)}
                  </ul>
                ))}

              </div>
            </div>
          </div>
          </div>
        <br/>
      </div>
    </div>
  )
}

export default DataFrame;

ReactDOM.render(<DataFrame />, document.getElementById('root'));

Any help is appreciated as always!

Answer 1

onKeyUp={e => setCol(e.target.value)}

this is the cause of your problem. e.target.value is a string, you are setting col equal to a string. Consequently, [...Array(col).keys()] gives you an array of length 1.

const col = '5';
console.log([...Array(col).keys()]);

Change

onKeyUp={e => setCol(e.target.value)}

to

onKeyUp={e => setCol(Number(e.target.value))}