Add Component into existing components

[ghost]

trafficstars

I have created my own Component that I wanted to integrate in the existing Card.jsx component <myComp /> like this. I have Imported the Component and added it but for some reason the component is not visible! Is there any special procedure I need to follow in this app to add my own components?

Also what I noticed is I can't take for example existing components like ListAdder and add it in the Header for example, I import it correctly and add the jsx tag where I want the component to show up but nothing happens. So is in this app some special procedure to follow for adding and moving components around? Thanks

[markusenglund]

React components must start with a capital letter. I'm guessing that's what is causing your first problem. There's no special procedure. I tried importing ListAdder to the Header file and it worked fine. Maybe you didn't get import syntax correct?

import ListAdder from "../ListAdder/ListAdder";

[ivanjeremic]

I have simlar problem, I have created my own component and if the component is simple with only one <h1></h1> it works, but when I add an more complicated component where I use state and componentDidMount I get only white screen and the dev site works only when I delete the component again. Now I'm not very familiar with redux, can it be I need to register there something from my own component to get it working?

[markusenglund]

Look at the error message in dev-tools to see what went wrong. You don't have to hook up a component to redux if you're not using any state from the redux store.

[ivanjeremic]

I have tested now and I can't get it working, here the component that does not work in React-Kanban. https://codesandbox.io/s/jz44mj4xl9

[markusenglund]

If you replace async await with something else it'll work. Babel handles async keyword in pretty complicated way, and the repo is currently not set up to handle it.

[ivanjeremic]

Do you know someone who maybe has time to make this repo so it can handle async await? Best case would be of course you. [email protected]

[markusenglund]

The easiest way for you to do it is to add @babel/polyfill to the repo.

1. npm install @babel/polyfill
2. Import it at the top of the client.jsx file like this

import "@babel/polyfill";
import React from "react";
...

[ghost]

Thank you so much it is working now!