CODEWITHSUNDEEP
reactjsmaterial-ui
Pranav
Pranav

Reputation: 1646

Getting error as 'Objects are not valid as React child' in Autocomplete when selected desired input

In an `Autocomplete Form in Material UI, while setting the value for selected input from drop down list gives error as 'Objects are not valid as a React child'. See the following code for reference

const [val, setVal] = useState({});

const handleClick = (e) => {
  const newValue = e.target.value;
  console.log("value", newValue);
  setVal(top100Films[0]); //you pass any value from the array of top100Films
  // set value in TextField from dropdown list
};

return (
  <div className={classes.root}>
    <Autocomplete
      id="size-small-standard"
      onChange={(e, value) => {
        handleClick(e);
      }}
      size="small"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      defaultValue={top100Films[13]}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="standard"
          label="Size small"
          placeholder="Favorites"
        />
      )}
    />
  </div>
);

Here is the CodeSandbox link: https://codesandbox.io/s/material-demo-forked-pn48n

How can we set value in Autocomplete Form?

Upvotes: 3

Views: 1626

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81803

As the message said, React child cannot be an object, in your code:

<h2>Value is: {val}</h2>

When you call setVal(top100Films[0]), you want React to render this code, which is invalid:

<h2>Value is: {{ title: "The Shawshank Redemption", year: 1994 }}</h2>

React child should have primitive type, so change your code to this

<h2>Value is: {val.title}</h2>

Or

<h2>Value is: {val.year}</h2>

Upvotes: 1

Related Questions