react-bootstrap-icons | React component for Bootstrap Icons | Icon library

Please i'm getting this error from @mui/material library, I have checked the package.json of the mui/system and it has alpha exported in it.

I have an array of items, where i can delete, view and edit a Post. But when i delete one of the items, by clicking the delete button, it doesn't update the list in React (but does in my database, so the request works).

My Profile.js component

I am learning to reactJS,& stuck with a problem. I made a component with text ('Online') in it. I am receiving the status of Online as true/false from props. But I want to make a change in a part of the component (not the full component). Like here I want to change the color of the icon CircleFill used after the 'online' text.

I have written the code below but don't know how to return that small segment?

I have an error like this:

index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. at ToDoAdder (http://localhost:3000/static/js/main.chunk.js:193:3)

here's my code:

So I have the following which I am trying to update to true to false when a user clicks on a button.

However it's not working keeps throwing

I am new to react,

I am trying to append the html from the return function within the same component,

here is my code

I'm using for-each function inside my drop-down component. dropDwonItemArray comes as an object with key and value.When I logs it is like below

What I nedd to do inside the drop-down is iterate through this object and pass the values as DropDownItems.I used for -each.Though it console.logs the value, the value doesn't passes to DropDownItem. Can you explain what is the reason here?

DropDown.js

I have a Button component (bootstrap-react) that has a X icon on one end of the button. Both the Button and X components have a onClick handler defined.

However, when a user clicks on the X icon, both the onClick functions of both components are triggered. How do we ensure that only the X icon's onClick is triggered when the icon is clicked?

I'm using redux in my project. I have already completed getting data from the database and display them in the UI. Now what I want to do is add a create part in the same file. I can't think of a way how to dispatch it inside connect.For the instance in my action file I'm just console logging.If it logs I know how do the rest. Could you please help me to find a way to dispatch the create function? What I need to run is the this.props.addComments(this.state.commentText); inside handleClick() function.

ViewTicket.js