Dcard.js | Unofficial Dcard API wrapper for Node.js developers | REST library

I am a few days into learning React JS. It's been very interesting and simplifies JavaScript, at least how I view it. My goal at the moment is to create a button that when clicked will create a new card with a random number generated in the card.

I can't figure out how to add the onClick= functionality for it to work the way I'm envisioning it. At the moment I have the code for the button written on my index.js file. index.js is my main file, it is where my App component is located. I see people use a file named App.js, not sure why, but that's another question for later.

Currently my buttons are stylized the following way.

I just created a next app using npx create-next-app. Then I installed sass by yarn add sass. I didn't do anything else, just type yarn dev...then boom. A ton of error showing in my terminal and in the browser(localhost) it says

Internal Server Error

My terminal now looks like this

I am attempting to update a table with with the response from an API. The response comes to one component and the table lies in another. I can see that I am successfully updating the context in the component but it doesn't seem to pass to the others. I have tried updating context and then passing it via prop drilling but that didn't work either. How do I get the component that contains the tables to listen to changes in the context? The code for my components is below:

Component in which the context is updated:

I have a class in which I have a method I want to call. Specifically the () => this.props.navigation.navigate('Detail'). At first I was using a button attached to each FeedCard to navigate, but it looked sloppy so instead I decided upon touchable opacity.

HomeScreen.js

I am currently trying to update react native hook state inside my parent functional component based on changes made in my child class component. I've been looking at and trying various solutions, but I haven't found one that's about functional and class components. Below is my code, what it's supposed to do, what errors I'm getting, and what I've tried.

What it's supposed to do

1. There's a button on the Overview Cards that takes you to Add Card.
2. AddCard allows you to fill out some TextInput boxes
3. AddCard should allow you to press the save button and be taken back to the Overview Card screen.
4. The information the user filled out during Step 2, should be displayed on the Overview Card screen.

I am getting stuck at Step 4.

App.js

I'm trying to create a simple-ish mobile app, but I'm pretty new to this. I've spent some time searching about the errors I'm getting. It seems like a common problem, but they all had the same/similar solutions but the solutions didn't work for me.

What is I'm trying to do? Right now the app is two pages, the home screen (Overview Cards) and the Add Card screen.

1. There's a button on the Overview Cards that takes you to Add Card.
2. Add Card allows you to fill out some TextInput boxes and
3. Add Card should allow you to press the save button and be taken back to the Overview Card screen and see the data you entered in the form.

However, I am getting stuck at Step 3. I am trying to make the Save button navigate the user back to Overview Cards, but there are simply errors instead.

Below is my code, the errors I'm getting, and then what I've tried.

App.js

I have a component that is only being rendered if there is Text. I am trying to create a header div to a card div that i created, but the header div isn't being rendered properly.

FeedCardHeader.js

I have built a Trello clone using ReactJS, where I have 4 columns called TODO, DOING, DONE and REJECTED, where I can add a card to any column.

In a file I am trying to map over card component and rendering properties from defined dummy data.

What I want to do?

• I want to delete a specific card when it is clicked using the card id in some way.

What is the problem?

• I do not understand how do I delete an entire card object when it matches a certain id.

My TaskboardList.js component :

I am publishing a React component as a standalone npmjs package. My React component relies on @material-ui/core as a dependency. I am able to specify the react and react-router-dom packages as external in my Webpack configuration file, but it seems as though @material-ui/core still gets bundled into my final product instead of being external.

webpack.config.js: