Question about react

JavaScript
1

Hello everyone, they stopped displaying elements in react in my browser, in the console it shows a bunch of errors, here is an example of them,
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError@react-dom.development.js:18687
update.callback@react-dom.development.js:18720
13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688

commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot@react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:28439 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) 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.
at createFiberFromTypeAndProps (react-dom.development.js:28439:1)

1 Like
2

Hi @pinkod02

I am learning React as well so not sure what the problem is.
Did you check this part of the error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) 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.

Also I leave you a link to a post explaining how to handle that error: (React) Element type is invalid, expected a string (for built in components) or a class/function but got avatar Borislav Hadzhiev Last updated: Jul 25, 2022

I hope that helps.

Happy coding!

3

To me, that sounds like you are trying to render an object directly to the screen, like:

const App = () => {
  const myObj = {
    foo: 'bar'
  }
  return (
    <div>
      { myObj }
    </div>
  )
}

You can only render primitives directly to the screen, or an array of JSX elements.

4

The other possibility is that you didn’t export or import a component properly. Can you post App.js?

5

If this is for a challenge please post your code and a link to the challenge.

If this is your own code, again we have to see the code to be able to help you.

As said, most likely either the JSX returned is wrong or the import/export is wrong.

6

Я хочу отобразить все,так как у меня вообще не чего не отображается.

Без имени
Без имени1920×1008 132 KB

7

Может в этой ссылки и есть ответ но я там не чего не понимаю,мне надо показывать примеры,а так я не пойму.

8

Hi @kevinSmith and @lasjorg

Is there someone who understand he/she? The message I got it says something like

Maybe there’s an answer in this link but I’m not there to understand, …

So I really don’t understand and nothing to do here.

Good luck and happy coding!

9

Я не понял эту статью)))).для меня там не чего не понятно объяснения.

1 Like
10

Images are not very helpful. Please post a working example on CodeSandbox/StackBlitz or a link to a GitHub repo.

You seem to be importing something (Clicker) from a CSS file and trying to use it as a React component.

11

Я не понимаю как добавлять свой файл в на эти площадки для меня это сложно.объяснить не кто не может,по этому мне проще файл отправить на прямую,чем усложнять этот процесс.

12

Well, as a programmer, you will absolutely have to learn github. When I look on youtube, I see what look like discussions of git and github in Russian. And we’re just asking for the most basic level - you need to create an account, create a repo, and add/commit/push your code. With that, you can provide a link to the repo and we can see exactly what your code is.

13

At the very least, in your App.js, I would console.log(Clicker) and see what you get. I suspect it will be undefined. As lasjorg pointed out, you seem to be importing from the wrong file. I suspect you meant to import that from ‘./components/clicker.js’. (Though, I would expect that to be in the clicker folder and I would expect the folder name and both file names to be PascalCase.)

14

I have a github account, but I don’t know how to add a file and where to get a link, on YouTube I don’t understand what they say there, because they don’t answer questions.

15

this is what the console shows
Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools
bootstrap:27 Uncaught TypeError: Cannot set properties of undefined (setting ‘props’)
at Component (react.development.js:313:1)
at ./src/components/app/App.js (App.js:5:1)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/index.js (person.js:32:1)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:24:1)
at startup:7:1
at startup:7:1

16

I started writing other code and it all started with the same error.

17

This is getting very frustrating because you don’t seem to be able to follow simple requests. You were asked to not share pictures of code - you did it again. I suggested to you:

At the very least, in your App.js, I would console.log(Clicker) and see what you get.

Have you done that?

I suggested:

I suspect you meant to import that from ‘./components/clicker.js’.

Have you tried that?

As to github:

I have a github account, but I don’t know how to add a file and where to get a link, on YouTube I don’t understand what they say there, because they don’t answer questions.

The link is just the url to the repo. Adding a file… First you have to create a repo - I have a “+” sign on the right of the menu bar. When I click on that, the first option is “New repository”. It will walk you through the steps.

You’re going to have to figure that out. Most of the time, as a developer, there is no one there to “answer question”. Most of the time, you have to do a lot of searching and reading and figuring stuff out.

18

I don’t know what that means.

We cannot help you until you can share a github repo. Once you do that, it will be much, much easier for us to figure out where the problem is.

19

If I did it right here is the link,

20

Others have already gave you good pointers to follow and eventually solve your issue, but just in case it is yet unclear: check the component you import Clicker. Is it imported/exported correctly? Is it a valid react component???
Once you answer those questions, you will likely know what the issue is