React Memo Feature gives :- Uncaught Error: Element type is invalid: expected a string but got: object

Question

I have functional component below:-

import React from 'react'
import { Dropdown } from 'semantic-ui-react'
const DropDownMenu= (props)=> {

const options = [
    { key: 'fruits', text: 'fruits', value: 'Fruits' },
    { key: 'vegetables', text: 'vegetables', value: 'Vegetables' },
    { key: 'home-cooked', text: 'home-cooked', value: 'Home-Cooked' },
    { key: 'green-waste', text: 'green-waste', value: 'Green-Waste' },
    { key: 'other', text: 'other', value: 'other' },

];

function onChangeHandler(e) {
  console.log(e.target.innerText);
  props.getCategoryValue(e.target.innerText);
};

return (
        
    );

};

export default React.memo(DropDownMenu);

Above functional component is being rendered in its parent component sellForm.js as below:-

import React,{Component} from 'react'
import { Button, Form} from 'semantic-ui-react'
import AutoCompleteInput from '../GoogleAutocomplete/autoComplete';
import DropDownMenu from '../DropDown/DropDown';
import update from 'react-addons-update';
import './sellForm.css';
import PreviewImages from '../PreviewImage/previewUploadedImages';
import FileInput from '../FileInput/FileInput';

class sellForm extends Component{
constructor(props){
    super(props);
    //this.imageUpload = React.createRef();
    this.state={
        postID: '',
        title: '',
        description:'',
        category:'',
        price: '',
        amount: '',
        freshness: '',
        contact: '',
        location: '',
        timestamp: '',
        images: []
    }
}

getCategoryValue=(category)=>{
    this.setState({category: category})
};

getItemLocation=(locationObject)=>{
    this.setState({location: locationObject})
};

saveInfo=(e)=>{
    this.setState({
        [e.target.name]:e.target.value});
};

postButtonClickHandler=()=>{
    console.log(this.state)
    console.log(typeof (this.state.images[0].file))
    // send this info to firebase database
};

 handleImageUpload= (file)=>{
     console.log('handle image Upload in sell form');
     this.setState({
         images: update(this.state.images, {$push: [file]})
     })

 };

 handleImageDeletion=(indexOfImage)=>{
     console.log('handle image deletion in sell form - index to be deleted is : ' ,indexOfImage);
     this.setState((prevState)=>{
         return{
             // images: prevState.images.splice(indexOfImage,1)
             images: update(this.state.images, {$splice: [[indexOfImage,1]]})
         }
     })
 };

shouldComponentUpdate(nextProps,nextState){
    console.log('[sellform.js] shouldComponentUpdate');
    return true;
}

componentDidMount(){
    console.log('[sellform.js] componentDidMount');
}

static getDerivedStateFromProps(props, state){
    //when user uploads or deletes images, then props changes
    //this lifecycle executes when function gets new props before render()
    //only use when component's inner state depends upon props...
    console.log('[sellform.js] getDerivedStateFromProps')
    return null;
}
componentDidUpdate(prevProps){
    console.log('[sellform.js] componentDidUpdate')
}

componentWillUnmount(){
    console.log('[sellform.js] componentWillUmMount')
}

render(){
    console.log('render of sellForm');
    console.log(this.state.images);

    let previewImages = ()

    return(
        
            
                
            

            
                {{}}
                    onPlaceSelected={this.getItemLocation}/>}
            

            
                
            

            
                
            

            
                    
            

            
                

            

            
                
                    {previewImages}
                
            

        
    )
}
}



export default sellForm

when sellFom renders it gives following error:- Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of sellForm. at invariant (react-dom.development.js:57)

Any ideas react community ??

user_8048503 · Answer

I solved this issue by updating both react and react-dom to 16.6.0.

user_2971707 · Answer

Hey I think problem is due to naming od sellForm. Ax far as know, React accepts CamelCase Name for classes. Take this example for now:

function Example() {
  // Declare a new state variable, which we'll call "count"
  return (
    
      Tes
    
  );
}
const MemoizedExample = React.memo(Example)
function exampleParent() {
  // Declare a new state variable, which we'll call "count"
  return (
    
      Parent
       
    
  );
}

ReactDOM.render(, document.getElementById("root"))

In above I have made name as smallcase for class, see the rendering doesn't happen. If you change the name of component from exampleComponent to ExampleComponent It will work. Similiarly for your problem change your class name from sellFrom to SellForm :). Here is the working one with component name camelcase:

function Example() {
  // Declare a new state variable, which we'll call "count"
  return (
    
      Tes
    
  );
}
const MemoizedExample = React.memo(Example)
function ExampleParent() {
  // Declare a new state variable, which we'll call "count"
  return (
    
      Parent
       
    
  );
}

ReactDOM.render(, document.getElementById("root"))

React Memo Feature gives :- Uncaught Error: Element type is invalid: expected a string but got: object

2 Answers