Imité un archivo para crear una serie de elementos del panel Contentful que fue creado por un desarrollador anterior, inserté el contenido en la página y lo agregué a la sección graphQL para asegurarme de que esté obteniendo algún tipo de datos. pero cuando intento mapear la matriz, arroja un error como se muestra a continuación:

Error en la función createFiberFromTypeAndProps

El tipo de elemento no es válido: se esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero se obtuvo object . Compruebe el método de renderizado de ValueList .

Un par de cosas que he visto en línea mencionaron importar el componente a través del método export default en lugar de exportar la función con corchetes y, de cualquier manera, esto produce los mismos resultados para mí. El código que he creado está a continuación:

 import React from 'react'; import slugify from 'slugify' import styled from 'styled-components' import Reveal from 'react-awesome-reveal' import { BREAKPOINTS, ANIMATION, customReveal } from '../styles/cssVariables' import Container from './layout/container' const ValuesStyles = { backgroundColor: 'black', textAlign: 'center', overflow: 'hidden' } const ValueItem = { backgroundColor: 'white', color: 'black' } const ValueList = (props) => { return ( <Container width={14}> {props.title} {props.valuesList.map((value, i) => ( <ValueItem style={ValueItem} key={i}>{value}</ValueItem> ))} </Container> ) } export default ValueList

¿Me he perdido algo ya que probé que el componente en sí es un accesorio de paso, pero cada vez que intento mapear la matriz arroja un error de representación? A continuación se muestra el código que se agregó a la página del contenedor.

 const valueList = get(this, 'props.data.contentfulPageContentStudio.valueList') <ValueList title="Test Value List" valuesList={valueList}/>