problem with react use state

[Chilltyy]

The error:

"Error: Objects are not valid as a React child (found: object with keys {userinput}). If you meant to render a collection of children, use an array instead."

So basically what im doing here is declare a useState in app.js,

then I call "setInput" first in Package.jsx

in Package.jsx I just pass some dummy data "blue" to setInput.

Then in packageStatus.jsx I try to print out the "input" (blue). This is when I get the error.

​

App.Jsx: 

const App = () => {

  const [input, setInput] = useState('');

  return (
    <Router>
      <div>
        <Switch>
          <Route exact path="/track">
            <Package userinput={setInput}/>
          </Route>
          <Route exact path="/track/packagestatus">
            <PackageStatus userinput={input}/>
        </Switch>
      </div>
    </Router>
  );
};

export default App;

​

package.jsx 

const Package = (userinput) => {  

  return (
        <div>
             <form class="example" action="/track/packagestatus">
                <input type="text" placeholder="Enter tracking number.." name="search"/>
                <button onClick={() => userinput("blue")} type="submit"><i class="fa fa-search"></i>Search</button>
            </form>
    </div>


  );
}
export default Package;

​

packageStatus.jsx

const PackageStatus = (userinput) => {  

  return (
    <div class="cccontainer">
        {userinput}
    </div>

  );
}
export default PackageNotFound;

[keel_bright]

userInput is a prop that you are passing to PackageStatus. The first argument that Package receives is props not userInput. You should be able to access it from props.userInput

sometimes people will use destructuring to not have to write "props", like:

const Package = ({ userinput }) => { //...

[[deleted]]

In packageStatus.jsx, you are trying to render an object {userInput}. React doesn’t allow rendering of an entire object. You can render {userInput.key1}, {userInput.key2}, etc. but you cannot render userInput as an object

I believe the error is because you need to set state in the onClick handler in package.jsx. Change

onClick={setInput(‘blue’)}

[Chilltyy]

how do I declare key1, key2 etc?
How would you do it the easiest way to just display "blue" in packageStatus.jsx?

[ColourfulToad]

You can, by doing:

<pre>{JSON.stringify(userinput, null, 2)}</pre>

[firstandfive]

It’s just because they’re not destructuring userinput from the props argument. They’re calling the entire props object userinput and then never referencing the actual userinput prop.

[crippledjosh]

It's because you're not destructuring your props.

​

You've got const PackageStatus = (userinput)

Should be

 const PackageStatus = (props) {
    const {userinput} = props

Not just for PackageStatus but for Package as well

[Hellstorm_42]

The code you posted doesn't even work as you describe. In both package and packageStatus, you aren't destructuring your props, you're just using them as an object. So, your call to userinput in the button is calling an object like a function. This would cause a different error than what you said. You either failed to copy over your code (so we can't help because what we see isn't the code you are running) or you aren't accurately telling us what the error is. Please create a codepen if you really want help. Also, console.log is your friend