CODEWITHSUNDEEP
reactjs
neha
neha

Reputation: 21

How to fix "Error: Element type is invalid: "

I am new in react js and trying to learn how the array works with a component using map function but I got this error recently and I don't have any idea what it is and how to solve it

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 App.

Here is my code **

Mapfun.jsx

**

  import React from 'react';
    import Card from './Cards';
    import Sdata from './Sdata';
    const Mapfun=Sdata.map((val)=>{
      return(
        <Card
        key={val.id}
        imgsrc={val.imgsrc}
        title={val.title}
        sname={val.sname}
        link= {val.link}
      />
      );
    });
    
    export default Mapfun;

**

Sdata.jsx

**

 const Sdata=[
    {
        id:1,
        imgsrc:'https://wallpapercave.com/wp/wp1917154.jpg',
        title:'Netflix original Series One',
        sname: 'Stranger Things',
        link:'https://www.netflix.com/in/'
    },

    {
        id:2,
        imgsrc:'https://wallpapercave.com/wp/wp4056410.jpg',
        title:'Netflix original Series Two',
        sname: 'Dark',
        link:'https://www.netflix.com/in/'
    },

    {
        id:3,
        imgsrc:'https://images.justwatch.com/poster/8589251/s592',
        title:'Netflix original Series Three',
        sname: 'The Vampire Diaries',
        link:'https://www.netflix.com/in/'
    },
]

export default Sdata;

**

Cards.jsx

**

 import React from 'react';
    function Card(props){
    
  return(
    <>
    <div className="cards">
    <div className="card">
      <img src={props.imgsrc} alt="mypic" className="card_img"/>
    <div className="card_info">
      <mark>
      <span className="card_category">{props.sname}</span></mark>
      <h3 className="card_title">{props.title}</h3>
      <a href={props.link} target="_blank">
        <button>Watch Now</button>
      </a>
    </div>
    
    </div>
    
  </div>
  
  </>
  )
  };

  export default Card;

**

App.jsx

**

import Mapfun from './Mapfun';

function App(){
    return(
        <>
        
         <Card/>
        <Mapfun/> 
         
        </>
    )
}
export default App;

**

index.js

**

 import React from 'react';
    import ReactDom from 'react-dom';
    import './index.css';
    import App from './App';
    
    ReactDom.render(
      
      
      <App/>,
      
      document.getElementById('root')
    );

Upvotes: 1

Views: 230

Answers (1)

Drew Reese
Drew Reese

Reputation: 202721

Your MapFun isn't a component, it's an array, so it can't be instantiated as a React component.

You can render as an array:

<Card />
{Mapfun}

Or you can convert it to a React component. In this case a function component that takes no props object and renders an array.

const Mapfun = () =>
  Sdata.map((val) => {
    return (
      <Card
        key={val.id}
        imgsrc={val.imgsrc}
        title={val.title}
        sname={val.sname}
        link={val.link}
      />
    );
  });

...

<Card />
<Mapfun />

Upvotes: 2

Related Questions