javascript - React.jsx: type is invalid -- expected a string - Stack Overflow

admin管理员组

文章数量:1303411

Trying to build a ToDo list app in react I'm taking a tutorial to learn React JS, everything was fine but getting the following error in the browser console, can anyone explain help me to solve this, and I'm new to react.

index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:24.
    at App (http://localhost:3000/static/js/main.chunk.js:172:83)
console.<puted> @ index.js:1
react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

App.js

import { useState } from 'react';
import './App.css';
import InputArea from './ponents/InputArea';
import ToDoItem from './ponents/ToDoItem';

function App() {
  const [items, setitems] = useState([]);

  const additems = (inputText)=>{
    setitems((prevItems)=>{
      return [...prevItems,inputText];
    });
  };

  return (
    <div className="container">
      <div className="heading">
      <h1>ToDo App</h1>
      </div>
      <InputArea additems={additems} />
      <div>
        <ul>
          {items.map((item, index )=> {
            return <ToDoItem key={index} text={item} />;
            })}
        </ul>
      </div>
    </div>
  );
}

export default App;

And it worked correctly before I have add ToDoItems ToDoItems.js

import React from 'react'

const ToDoItem = (props) => {
    return (
        <div>
            <li>{props.text}</li>
        </div>
    )
}

export default ToDoItem

InputArea.js Code

import React, {useState} from 'react';

const InputArea = (props) => {
    const [inputtext,setinputtext]= useState("");

    const handleChange = (event)=>{
        setinputtext(event.target.value);
    };

    return (
        <div className="form">
            <input type="text" onChange={handleChange} value={inputtext} />
            <button
            onClick={()=>{
                props.additems(inputtext);
                setinputtext("");
            }}
            >
                <span>Add</span>
            </button>
            
        </div>
    ) 
}

export default InputArea

Trying to build a ToDo list app in react I'm taking a tutorial to learn React JS, everything was fine but getting the following error in the browser console, can anyone explain help me to solve this, and I'm new to react.

index.js:1 Warning: React.jsx: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:24.
    at App (http://localhost:3000/static/js/main.chunk.js:172:83)
console.<puted> @ index.js:1
react-dom.development.js:25058 Uncaught Error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: object. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


reportWebVitals();

App.js

import { useState } from 'react';
import './App.css';
import InputArea from './ponents/InputArea';
import ToDoItem from './ponents/ToDoItem';

function App() {
  const [items, setitems] = useState([]);

  const additems = (inputText)=>{
    setitems((prevItems)=>{
      return [...prevItems,inputText];
    });
  };

  return (
    <div className="container">
      <div className="heading">
      <h1>ToDo App</h1>
      </div>
      <InputArea additems={additems} />
      <div>
        <ul>
          {items.map((item, index )=> {
            return <ToDoItem key={index} text={item} />;
            })}
        </ul>
      </div>
    </div>
  );
}

export default App;

And it worked correctly before I have add ToDoItems ToDoItems.js

import React from 'react'

const ToDoItem = (props) => {
    return (
        <div>
            <li>{props.text}</li>
        </div>
    )
}

export default ToDoItem

InputArea.js Code

import React, {useState} from 'react';

const InputArea = (props) => {
    const [inputtext,setinputtext]= useState("");

    const handleChange = (event)=>{
        setinputtext(event.target.value);
    };

    return (
        <div className="form">
            <input type="text" onChange={handleChange} value={inputtext} />
            <button
            onClick={()=>{
                props.additems(inputtext);
                setinputtext("");
            }}
            >
                <span>Add</span>
            </button>
            
        </div>
    ) 
}

export default InputArea

• javascript
• reactjs
• react-native

Share Follow edited Nov 19, 2021 at 5:56 Arzath Areeff asked Nov 18, 2021 at 12:24 Arzath AreeffArzath Areeff 9522 gold badges55 silver badges1414 bronze badges 5

• 1 What;s the structure of your item? ing from the items array? – mike Commented Nov 18, 2021 at 12:32
• 1 Can you please provide a jsfiddle (or any other platform) where this issue is reproducible? To make it easier to understand and try to find the solution. – Hugo Noro Commented Nov 18, 2021 at 12:44
• 1 I've created a quick codesanbox with the code provided and I cannot reproduce your issue. I had to ment out the 'InputArea' ponent declaration since you did not provide the code for it. Since it's working fine with that line mented, it might be something wrong on that ponent. Can you provide the code for it? Which React version are you using? – Hugo Noro Commented Nov 18, 2021 at 12:53
• Item structure is Strings eg: buy milk, homework – Arzath Areeff Commented Nov 19, 2021 at 5:44
• React version is 17.0.2 added InpuArea.js code please check the main error says "Check your code at App.js:24." and this is my 24th line of code in App.js {items.map((item, index )=> { return <ToDoItem key={index} text={item} />; })} – Arzath Areeff Commented Nov 19, 2021 at 5:58

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 1

Now it is solved by adding import React, { useState } from "react"; in App.js file

It can be because you may have defined "export default" for a specific ponent. And when you import in other ponent file then you may imported using the curly braces like

import { header } from '../header.js';

So you may get warning.

So for default export just remove curly braces and if you have defined using export only then use curly braces.

I was getting a similar error for a different reason - in my App.js file, I was using Routes as such:

<Router>
  <Routes>    
    <Route 
      path="/" 
      element={<Home />} 
    />
  </Routes>
</Router>

But I had nothing written in the corresponding "Home.js" page yet, so the route was reffering to an object that did not yet exist. Entering any exportable content into the "Home.js" file removed the errors.

In my case: export default function(); was with the curly braces, so that was the the issue !

I had the error displaying as a white screen. The problem was that I created all my ponents without putting any contents. As soon as I added texts to the ponents, the error disappeared

本文标签： javascriptReactjsx type is invalidexpected a stringStack Overflow