Cannot display const in react component

Question

I am building a web application with ReactJS and GatsbyJS, and I have some problems with const rendering inside my component.

I read the official ReactJS documentation about the map () method, and I really don't know what I'm doing wrong.

If someone can help:

const contents = [
    {
        title: "Allier design et performance, c'est possible",
        chapo: "Les meilleures technologies au service de votre site web."
    },
    {
        title: "Nouvel ère : les application web progressives",
        chapo: "Pour des sites web accessibles en tout lieu et tout heure."
    },
    {
        title: "Design centré utilisateur",
        chapo: "Pour un site adapté à votre cible."
    }
]
const contentList = (contents) => contents.map((content, i) =>
    (
        <div className="item" key={i}>
            <div className="headline">
                <h1>{content.title}</h1>
                <h2>{content.chapo}</h2>
            </div>
        </div>)
)
const prevButton = () => {
    return (
        <span>Prev</span>
    )
}
const nextButton = () => {
    return (
        <span>Next</span>
    )
}


export const Teaser = ({prevButton, nextButton, contentList}) => {

    return (
        <section className="teaser">        
            <div className="container">
                {contentList}
            </div>
            <div className="slide-buttons">
                {prevButton}
                {nextButton}
            </div>
        </section>
    )
}
export default Teaser

There is no error message in the console . However, when I study the component with the React developer tools, I see that my components are not installed.

Answer 1

Since contentListyou save the link to the arrow function in, you need to call this method to get the result, you also need to pass an array contents.

Like this:

<div className="container">
    {contentList(contents)}
</div>

, :

// now contentList will be an array, not a function

const contentList = contents.map((content, i) =>
    (
        <div className="item" key={i}>
            <div className="headline">
                <h1>{content.title}</h1>
                <h2>{content.chapo}</h2>
            </div>
        </div>
    )
)

, :

prevButton()

nextButton()

const prevButton = (
    <span>Prev</span>
)
const nextButton = (
    <span>Next</span>
)

, :

const contentList = (contents) => contents.map((content, i) =>
    (
        <div className="item" key={i}>
            <div className="headline">
                <h1>{content.title}</h1>
                <h2>{content.chapo}</h2>
            </div>
        </div>)
)

console.log('contentList = ', contentList)

Hide result

Answer 2

, , contentList. nextButton prevButton ?

import React  from 'react'
import Link from 'gatsby-link'
import './teaser.scss'

const contents = [
    {
        title: "Allier design et performance, c'est possible",
        chapo: "Les meilleures technologies au service de votre site web."
    },
    {
        title: "Nouvel ère : les application web progressives",
        chapo: "Pour des sites web accessibles en tout lieu et tout heure."
    },
    {
        title: "Design centré utilisateur",
        chapo: "Pour un site adapté à votre cible."
    }
]

const contentList = contents.map((content, i) =>
    (
        <div className="item" key={i}>
            <div className="headline">
                <h1>{content.title}</h1>
                <h2>{content.chapo}</h2>
            </div>
        </div>
    )
)

console.log('contentList = ', contentList)
const prevButton = () =>  (
        <p>Prev</p>
    )

console.log('<p> Prev = ', prevButton)
const nextButton = () => (
        <p>Next</p>
    )

console.log('<p> Next = ', nextButton)   

export const Teaser = () => {

    return (
        <section className="teaser">        
            <div className="container">
                {contentList}
            </div>
            <div className="slide-buttons">
                {prevButton}
                {nextButton}
            </div>
        </section>
    )
}
export default Teaser