Question 73344 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React js input not working after moving the code to a function – Reactjs

The input was working with no problem, but I needed to move the input code into a function. Now I can only type in one word in the input value. Not sure what the solution would be to fix this issue. I’m also having a similar issue with my sorting function.

here is the link to my code
https://codesandbox.io/s/sweet-murdock-5uqfxs?file=/src/App.js

I created another function for the input, and still no luck.

Tags:

2

Answers


  1. 0

    That is because you define the MyInput component inside the App component. So in each re-render of App it will create a new MyInput component so it will lose focus and you need to re-focus the input.

    Defining the MyInput component outside of App so that it is stable will fix the issues. You will have to pass the required values and handlers through props.

    In general it is a bad pattern to define components inside other components, due to this kind of problems.

    Login or Signup to reply.
  2. 0

    Your code is dirty and painful to read.

    You have unnecessarily used props almost everywhere. Your app is basically a to-do list for shopping items. The app Creates and Reads the data – the only two functionalities.

    Also you have unnecessarily composed your basic app into multiple components within the main App component. Due to this, somehow your inputValue state doesn’t exactly map to username inside MyInput.

    Suggestion: Organize your state variables and reduce composition of components.

    I am not trying to be rude, but your code is not organized. It is painful to read.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search