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}/>
Related
Currently trying to build a react native screen that displays a chessboard. I am using the react-chessboard component from https://github.com/Clariity/react-chessboard. My code is very basic and I just want to display the screen on an IOS phone using expo. Running this app in a web browser works and the chessboard displays. However, if I want to use a mobile device, I keep getting the error:
Invariant Violation: View config getter callback for component div
must be a function (received undefined). Make sure to start
component names with a capital letter.
Why is this happening?
import { useRef, useState } from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Chessboard} from 'react-chessboard';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
export default function App() {
return (
<view>
<Chessboard/>
</view>
);
}
React Native doesn't have divs, it has Views instead. React libraries will usually not translate into React Native libraries because the building blocks are not the same. You will most likely have to find a React Native library for your chessboard or build your own.
I have a simple code which I can not get to run, the code is as follows:
import React from 'react';
import { View } from 'react-native';
import WelcomeScreen from './app/screens/WelcomeScreen.js';
export default function App() {
return <WelcomeScreen/>
}
with the WelcomeScreen.js file being:
import React from 'react'
import { StyleSheet, ImageBackground } from 'react-native'
function WelcomeScreen(props) {
return (
<ImageBackground
styles={styles.background}
source={require("../assets/background.png")}
></ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1
}
})
Each time this is run the console is filled with error messages and upon looking at the app I see the message:
"Component Exception
Element type is invalid: expected a string or a class/function but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of 'App'."
I'm new to native react but the previous code I had before attempting to import the welcome screen file ran correctly. I've tried to change the default to object in app.js but that didn't work, I've looked around for a while now and just can't figure out what's going on. Any and all help is greatly appreciated
Thank you for your time
Update your Welcome screen to:
export default function WelcomeScreen(props) {
return (
<ImageBackground
styles={styles.background}
source={require("../assets/background.png")}
></ImageBackground>
);
}
Now you are good to go :)
Currently this two components are child components, so what I want to achieve here is to pass the props from Search component to Images component. Because I wrote everything in a function component, I thought this might be a great place for me
When user enters something in the input field it will automatically search for new images. In order to give you a better understanding of my issue, I will put a link to Codesandbox here. So I want to pass the props to the sibling component, so it will output the filtered search result.
https://codesandbox.io/s/patient-dawn-khouk
So only files you need to look at are: Search.js, Images.js
Ensure your images prop is actually an array. Can you do some debugging to figure out what your images object actually is?
Using propTypes is a way to have react help, and if it is nullable (i.e. not isRequired), then use a guard on it:
import React from "react";
import PropTypes from 'prop-types';
import Image from "./Image";
const propTypes = {
images: PropTypes.arrayOf(
PropTypes.shape({
id: PropTypes.string.isRequired, // used as key
src: PropTypes.string.isRequired, // used for image source
<... other object properties ...>
})
),
};
const Images = ({ images }) => {
const images = images && images.map((image) => {
return <Image key={image.id} image={image}/>
});
return <div className="images">{images}</div>;
}
Images.propTypes = propTypes;
export default Images;
Trying out react-spring, using a simple tutorial. However, it's not working for me. Here's my code:
import React, { Component } from "react"
import { Spring } from "react-spring"
export default class Box extends Component {
render() {
return (
<Spring
from={{ opacity: 0, marginTop: -1000 }}
to={{ opacity: 1, marginTop: 0 }}
>
{props => (
<div style={props}>
<p>Welcome to your new Gatsby site.</p>
<p>Now go build something great.</p>
</div>
)}
</Spring>
)
}
}
and here's the error
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of Box.
I'm using react-spring in gatsby's default starter, and am simply importing my Box component like so:
import React from "react"
import Layout from "../components/layout"
import Box from "../components/box"
const IndexPage = () => (
<Layout>
<Box />
</Layout>
)
export default IndexPage
The changelog says that in version 9.0 they changed how to import things and import { Spring, useSpring } from 'react-spring' should work and should be used.
I found on their GitHub issues the solution that worked for me.
Put:
'^react-spring$': '<rootDir>/node_modules/react-spring/web.cjs',
in jest.config.js
In my case that was a submodule in monorepo so I had to jump up two directories to reach that library:
'^react-spring$': '<rootDir>/../../node_modules/react-spring/web.cjs'
I just started using the electron-react-boilerplate and currently trying to use a custom title bar by using the electron-titlebar package which was installed using npm install --save eletron-titlebar.
Based on my very weak understanding of the electron boilerplate and electron in general, I tried what the electron-titlebar docs suggested and introduced the <TitleBar> component on the same level as the children element of the Root component, resulting in the code below.
Problem: However whenever the <TitleBar> component is there, we get a blank screen. Removing the component give us back our original DOM elements, but obviously, no title bar since we just removed it.
An error is also shown in the JS console
react-dom.development.js:55 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
What is the correct way to use electron-titlebar with the electron-react-boilerplate setup?
/app/containers/App.js
// #flow
import * as React from 'react';
import TitleBar from 'electron-titlebar';
type Props = {
children: React.Node
};
export default class App extends React.Component<Props> {
props: Props;
render() {
const { children } = this.props;
return (
<div>
<TitleBar
title="Electron"
/>
{children}
</div>
)
}
}
Just starting messing around with Electron myself and ran into this error. I was able to solve it by changing my import to require:
const TitleBar = require('frameless-titlebar');