CODEWITHSUNDEEP
node.jsreactjsmaterial-ui
Ebrahim Mithaiwala
Ebrahim Mithaiwala

Reputation: 87

Error at argument must be a react element, but you passed undefined

I started developing a new app in react and material ui, have encountered an issue:

Error: React.cloneElement(...): The argument must be a React element, but you passed undefined.

Hence I haven't written any logical code yet, I've just started with react and material ui. A solution and guidance to this issue will be really very helpful.

Here is the code:

import React from 'react';
import { MenuItem, FormControl, Select } from "@material-ui/core";
import './App.css';

function App() {
  return (
    <div className="app">
      <h1></h1>
      <FormControl className="app_dropdown">
        <Select variant = "Outlined" value = "abc">
          <MenuItem value="worldwide">Worldwide</MenuItem>
          <MenuItem value="worldwide">Option 2</MenuItem>
          <MenuItem value="worldwide">Worldwide</MenuItem>
          <MenuItem value="worldwide">Worldwide</MenuItem>
        </Select>
      </FormControl>

      {/* { Header } */}
      {/* { Title + Select input dropdown field } */}

      {/* { Info Box1 } */}
      {/* { Info Box2 } */}
      {/* { Info Box3 } */}

      {/* { Table } */}
      {/* { Graph } */}

      {/* { Map } */}
    </div>
  );
}

export default App;

Upvotes: 6

Views: 12952

Answers (2)

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

Looks like the Material UI's Select component's variant prop is case-sensitive.
It allows values 'filled' | 'outlined' | 'standard'

So, to solve this just make Outlined into outlined

<Select variant = "outlined" value = "abc">

Upvotes: 2

Shubham Chitransh
Shubham Chitransh

Reputation: 356

variant should be in small-case outlined and also please pass the value and onChange props to select

function App() {
const [country, setCountry] = useState("")
  return (
    <div className="app">
      <h1></h1>
      <FormControl className="app_dropdown">
        <Select variant = "outlined" value = {country} onChange={(e) => setCountry(e.target.value)}>
          <MenuItem value="India">India</MenuItem>
          <MenuItem value="USA">USA</MenuItem>
          <MenuItem value="UK">UK</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

export default App;

Upvotes: 1

Related Questions