Create element based on UserInput

Question

[FIXED]

I'm new to reactjs. Trying to create an element based on user input, which it generates below the input box side by side, but it does not seem to generate it. Not getting any errors either.

I think the error could be on line 6 where I'm adding the ' else if' statement but not sure what's going wrong there. Thanks

ISSUE FIXED - I got the barebones working, with some help here's the blitz https://stackblitz.com/edit/react-evgduq

function App() {
  const [data, setData] = useState(null);

  function getData(val) {
    setData(val.target.value);
    console.log(data);

    if (data < 2) {
      //genarate div based on value (data)
      return <BigElement />;
    } else if (data > 2) {
      return <SmallElement />;
    } else {
      console.log('error');
    }
  }
 //declaring small and big elements here
function BigElement(val) {
    const newDiv = document.createElement('div');
    console.log('add');
    document.body.appendChild(newDiv);
    newDiv.classList.add('div-style');
  }

  function SmallElement(val) {
    const newDiv = document.createElement('div2');
    console.log('add2');
    document.body.appendChild(newDiv);
    newDiv.classList.add('div-style2');
  }
//InputBox
  return (
    <div className="App">
      <h1 className="maintext">Enter Tasks</h1>
      <input type="text" className="input1" id="inp1" onChange={getData} />
    </div>
  );
}

StackBltiz Demo - https://stackblitz.com/edit/react-7ytjik?file=src/App.js

Answer 1

dont update state directly as rendering is disabled and react dont understand if you updated your state and always controll your input by yourself

[state , setState] = useState('')

<input value={state} onChange ={(e) => setState(e.target.value)} />