1

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}/>
Sam St Aubyn
  • 127
  • 1
  • 9
  • 1
    Separately, [using an index as a key is generally not best practice](https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318) with an array whose contents can change. – T.J. Crowder Jan 13 '22 at 13:53
  • Apologies for the missing < that's a copying error! Also I'm going to slugify the key once it's working correctly i was just using this to test. – Sam St Aubyn Jan 13 '22 at 14:07
  • The error is saying what's wrong. `...` is using `ValueType` as a component, but it isn't a component, it's a simple object (`const ValueItem = { backgroundColor: 'white', color: 'black' }`). What are you expecting when you use it as a component? – T.J. Crowder Jan 13 '22 at 14:10
  • 1
    LOL We've **all** made mistakes like that. :-) Happy coding! – T.J. Crowder Jan 13 '22 at 14:26

0 Answers0