I'm testing some React app with Material-UI, I have this error:
Component definition is missing display name
import React from 'react';
import TextField from 'material-ui/TextField';
import PageBase from '../components/PageBase';
const FormPageError = () => { //HERE'S THE WARNING
return(
<PageBase title="Formulario con validaciones"
navigation="Application / Formulario Error">
<form>
<TextField
hintText="Escriba su nombre"
errorText="Requerido"
/>
</form>
</PageBase>
);
};
export default FormPageError;
With that error, I'm having this in the console:
Warning: React.createElement: 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.
What I have to do? thanks
EDIT: I edited the code thanks to the comments below, but I still getting the same warnings:
Related
I know this is a common error but I couldn't find an answer that was relevant for my situation.
I have two files nested together in a folder; one is a parent functional component, one is a child functional component.
The parent file is importing and structured like this
.....
import NavigationIcon from "./NavigationIcon";
const NavigationIcons = () => {
return (
<IconContext.Consumer>
{(icons) => (
<View>
{icons.map((icon) => (
js:12 <NavigationIcon key={icon.id} icon={icon} />
))}
</View>
)}
</IconContext.Consumer>
);
};
export default NavigationIcons;
The children file is structured like this
import React from "react";
import { Pressable, Icon } from "react-native";
function NavigationIcon(props) {
return (
js:6 <Pressable onPress={() => console.log("pressed icon ")}>
<Icon name={props.icon.name} type={props.icon.type} />
</Pressable>
);
}
export default NavigationIcon;
Here's the error message:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, 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 your code at NavigationIcon.js:6.,
in NavigationIcon (at NavigationIcons.js:12)
edit: I did try importing NavigationIcon as import {NavigationIcon} from "..."
I figured it out. I'm using expo for my app development and it uses 0.62. I was trying to utilize the new component Pressable which came out in 0.63
I am trying to add a search bar within a navbar using react-bulma-components, but I get this error:
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 TopNav.
I don't get the error when I exclude the Navbar.Item containing a Field element. The following is my code:
<Navbar>
<Navbar.Brand>
<Navbar.Item renderAs="a" href="/">
The Nomad
</Navbar.Item>
<Navbar.Burger>
</Navbar.Burger>
</Navbar.Brand>
<Navbar.Item>
<Field>
<Control>
<Input placeholder="Search" />
</Control>
</Field>
</Navbar.Item>
</Navbar>
Any help is much appreciated!
I managed to figure this out on my own. It turns out that Field, Control and Input are properties of the Form component. I had the following in my import statements (incorrect version):
import React from 'react';
import { Navbar } from 'react-bulma-components';
import { Field, Control, Input } from 'react-bulma-components';
What I should have had was this:
import React from 'react';
import { Navbar } from 'react-bulma-components';
import { Form } from 'react-bulma-components';
const { Field, Control, Input } = Form;
I'm trying to use semantic UI for React with its modal.
Dropdown is ok but modal can't load :
import {DropDown} from "semantic-ui-react";
import {Modal} from "semantic-ui-react";
export default class Builder extends Component {
render(){
return(
<DropDown/>
<Modal/>
)
}
}
The console is returning this error :
app.js:547 Warning: React.createElement: 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.
Check the render method of `Portal`.
I have already tried like this :
import Modal from "semantic-ui-react";
And as I saw, Modal folder is at the same level as the Dropdown in my packages.
Any help would be welcome!
Thanks
I think the solution to your problem is either of the following:
You forgot to import import React, { Component } from "react";
The structure of your code. You must wrap both JSX elements in an enclosing tag as they are adjacent. It should be like this:
<div>
<Dropdown/>
<Modal/>
</div>
You don't have to separate import two components as they are both in semantic-ui-react library.
Hope this helps
I'm getting an error whenever I try to render a Field from Redux-form-material-ui. This is my form code:
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { TextField, DatePicker, SelectField } from 'redux-form-material-ui';
class InputForm extends Component {
render() {
return(
<form>
<div>
<Field name="eventDate" component={DatePicker} format={null} hintText="What day is the event?"/>
</div>
</form>
)
}
}
InputForm = reduxForm({
form: 'contact'
})(InputForm);
export default InputForm;
The error that I'm getting is this one:
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 ConnectedField.
I know it has to do with the component={ DatePicker } assigned on the Field element because if I change it to TextFIeld it renders okey.
I found out that DatePicker hasnt been implemented(do not know why) on the new release of redux-form-material-ui#next. So this has been solved.
I followed the Input.Search example here https://ant.design/components/input/
import { Input } from 'antd';
const Search = Input.Search;
ReactDOM.render(
<Search placeholder="input search text" onSearch={value => console.log(value)} />
, mountNode);
I got the following error:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
Any idea why?
It works just fine if I used the <Input .../> component. Why does <Input.Search .../> break?
Input.Search is imported after antd#2.5.0, see: https://ant.design/changelog#2.5.0
To import Search from ant design Input your code is wrong.
The correct syntax to Import Search is Given below:-
const {Search} = Input;