I’ve mimicked a file for creating an array of items from the Contentful dashboard that was built by a previous developer, I’ve inserted the content into the page and added them to the graphQL section to ensure that it’s pulling in some sort of data but when I try and map the array it’s throwing an error as pictured below:

Error in function createFiberFromTypeAndProps

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

A couple of things I've looked at online mentioned importing the component via the export default method instead of exporting the function with curly brackets and either way this produces the same results for me. The code I've created is below:

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

Have I missed something as I’ve tested that the component itself its passing props but whenever I try and map the array it throws a rendering error? Below is the code that's been added to the container page.

const valueList = get(this, 'props.data.contentfulPageContentStudio.valueList')


<ValueList title="Test Value List" valuesList={valueList}/>