React elements from array. Warning: React.createElement: type is invalid

Question

I am relatively new to React (and JS for that matter) so please excuse if the question seems dumb.

Ok so I am making a website where the news section will be generated using React from an array stored in a separate news.js file. I am however unable to correctly render the News element in my main App.js file. The console.log shows that the object does contain the desired information. I do however get the following error in the browser console:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: array.

I am not sure what this error means. How do I change the array into a function and why would I want to do that? I want to render the array elements into the DOM structure.

I hope the problem is clear enough.

import React, { Component } from "react";


const newsList = [
    {
      title: "Title",
      id: 2,
      avatarLink: `/res/fandom.png`,
      avatarAlt: `fandom`,
      content: `content`,
      buttomText: "GO TO VIDEO",
      buttonLink: `https://www.youtube.com/something something`
    },
    {
      title: "Title",
      id: 2,
      avatarLink: `/res/fandom.png`,
      avatarAlt: `fandom`,
      content: `content`,
      buttomText: "GO TO VIDEO",
      buttonLink: `https://www.youtube.com/something something`
    },
  
  
  const TempElStructure = newsList.map(function (el) {
    return (
    <div class="news_article">
    <h3>{el.title}</h3>
    <div class="article_wrapper" id={el.id}>
      <img
        src={el.avatarLink}
        alt={el.avatarAlt}
        width="450"
        height="400"
      />
  
      <p>
        {el.content}
        <br />
        <a class="button" target="_blank" rel="noopener noreferrer" href={el.buttonLink}>{el.buttomText}</a>
      </p>
    </div>
  </div>)
  });

  console.log(TempElStructure);

  const News = () => {
    return <TempElStructure/>;
}

export default News

const newsList where is the ] bracket ? can you verify if its syntactically correct ? — Ali
– Ali, Commented Sep 5, 2020 at 17:10

Khai Nguyen · Accepted Answer · 2020-09-05 17:42:01Z

1

your TempElStructure component is not a function, it is a variable (array). Basically, if you want to add new JSX tag like <TempElStructure>, TempElStructure must be a function.

const TempElStructure = newsList.map(function (el) {})

should be changed to

const TempElStructure = (props) => newsList.map(function (el) {})

Check codesandbox here: https://codesandbox.io/s/nifty-chatelet-lmz45

answered Sep 5, 2020 at 17:42

Khai Nguyen

891 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

emeraldsanto · Accepted Answer · 2020-09-05 17:12:08Z

That's because a component can only return a single React element, so either wrap your array in a Fragment:

const News = () => {
    return (
        <Fragment>
            <TempElStructure />
        </Fragment>
    );
};

or do it all inline:


const News = () => {
    return (
        <Fragment>
            {newsList.map((el) => (
                <div class="news_article">
                    <h3>{el.title}</h3>
                    <div class="article_wrapper" id={el.id}>
                        <img
                            src={el.avatarLink}
                            alt={el.avatarAlt}
                            width="450"
                            height="400"
                        />

                        <p>
                            {el.content}
                            <br />
                            <a
                                class="button"
                                target="_blank"
                                rel="noopener noreferrer"
                                href={el.buttonLink}
                            >
                                {el.buttomText}
                            </a>
                        </p>
                    </div>
                </div>
            ))}
        </Fragment>
    );
};

Collectives™ on Stack Overflow

React elements from array. Warning: React.createElement: type is invalid

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related