编写 JS 存储 10 个值但 TypeError: input is a void element tag and must not have `children` 也不能使用 `dangerouslySetInnerHTML

Question

i Am Writing A JavaScript Function In React For Adding 10 Values To Array This 10 Values To Be Stored From Html Input Field So what i did is added input field with id 'tsk ' and button 'bt3' so whenever the button get hit it run a js script which takes the value of input field 'tsk' and pushed it to empty array in js so every time i hit button the value inside field is pushed to array and prompt over label 'list ' by using innerHTML method

here my efforts of html is

 <div id='array'>
      <input type='number' id='tsk'>push 10 values</input>
      <label htmlFor='list' id='list' >List values are:</label>
      <button id='bt3' onClick={tsk3}>ADD Value</button>
    </div>

and here is corresponding js to run it

function tsk3()
{
  let item = document.getElementById('tsk').value;
  var array =[1,];
  array.push(item);
  document.getElementById('list').innerHTML=array;
}

but instead of working the code it showing me unnecessary type error OUTPUT OF WEBPAGE

Answer 1

This error occurs because in React when void elements have either children or dangerouslySetInnerHTML prop. HTML elements such as are void elements that are only self-closing without any content. Therefore, React will throw an exception if you set either children or the innerHTML property for a void element. Also, there are syntax errors in your code. The htmlFor property sets or returns the value of the for attribute of a label. The htmlFor attribute specifies which form element a label is bound to which in your case should be 'tsk' ie the input element. Accordingly, the label tag should appear before the input tag, something like the following -

 <div id='array'> <label htmlFor='task' id='list' >List values are:</label> <input type='number' id='tsk' placeholder='push 10 values'/> <button id='bt3' onClick={tsk3}>ADD Value</button> </div>

Also note input has to be a self-closing tag.