Input values not rendering to another component in React Hooks

Question

I am practising React props by building an input form using hooks. The idea is when I enter the inputs in NewList component and click the submit button, its values will render on the MyJobList component in a form of HTML elements. The issue is when I submitted the form, nothing is displaying on the web page. It could be that I am passing the data incorrectly.

Here are my codes. I have minimized it to highlight possible problems and included a link to full codes down below:

newlist.js

const NewList = () => {
  const [inputState, setInputState] = useState({});
  const onSubmitList = () => {
    setInputState({
      positionTitle: `${inputs.positionTitle}`,
      companyName: `${inputs.companyName}`,
      jobLink: `${inputs.jobLink}`
    });
  };

  const { inputs, handleInputChange, handleSubmit } = CustomForm(onSubmitList);

myjoblist.js

const MyJobList = inputs => (
  <div>
    <h3>{inputs.positionTitle}</h3>
    <p>{inputs.companyName}</p>
    <p>{inputs.jobLink}</p>
  </div>
);

navbar.js

const Navbar = inputState => (
  <Router>
    <Switch>
      <Route path="/my-list">
        <MyJobList inputs={inputState} />
      </Route>
    </Switch>
  </Router>
);

Any help and guidance are much appreciated.

Here's a link to complete code: Code Sandbox

Yoshi · Accepted Answer · 2020-07-05 05:00:41Z

2

So, you need the persisting state to live in a shared parent component, in the existing components, your choices would be either App.js or navbar.js (side note, you should PascalCase your component file names, so NavBar.js). Ideally, you should make a shared container that will hold the state. When you navigate away from the newlist component to view myjoblist, the newlist component unmounts and you lose the state. With a shared parent component, the parent won't unmount when it renders its children (newlist & myjoblist).

Another problem is that you you are passing a callback to your custom hook, but the callback doesn't have any arguments. In your handle click, you need to pass it the inputs. You also cannot set your state to an empty string before you pass the inputs to your callback, do it after.

const handleSubmit = event => {
  e.preventDefault()
  callback(inputs)
  setInputs({}) // set it back to the default state, not a string
}

Lastly, the inputState in navbar is an undefined variable. You are rendering Navbar inside your app and not passing it any props. The first argument to a functional component in react is props. So, even if you were passing it state, you'd need to extract via props.inputState or with destructuring.

Here's a working example that could still use some clean up:

https://codesandbox.io/s/inputform-with-hooks-wwx2i

answered Jul 5, 2020 at 5:00

Yoshi

1465 bronze badges

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

1 Comment

Mohammed Asker Over a year ago

Wow, that was very informative and well explained! To rephrase it, my main problem is I did not store the states in Navbar component since this component is sitting above the other components hierarchy and if I store the states in that component, I'm going to revisit callbacks and hooks once more, but I think I start to understand how props works and pass its data the right way. I'll be able to pass down props to NewList and MyJobList components. Thank you, Yoshi! I appreciate your help!

Collectives™ on Stack Overflow

Input values not rendering to another component in React Hooks

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related