I have these codes: let arr = []; This is what console.log(arr); shows: [“Item1”, “Item2”, “Item3”, “Item4”] Below is my graph: How can I loop through the object arr to be put inside the labels? Answer The charts label receives a string or an array of strings: S…
Tag: reactjs
How to remove an element from a Mobx observable array, without causing the entire consuming component to rerender?
So let’s say i have a todoStore. It has an action that deletes a todo by id. Note that i tried both filter and splice: The consuming Todos component(Note that i’m wrapping the Todo with observer): The simple Todo component: Even though i’m clearly mutating(as opposed to constructing a new ar…
React Custom Modal Component Problems With Updating Same Component Used Repeatedly
I built a custom Modal. There is one particular function I would like it to do when opened. I would like a CSS class to be toggled when this modal is opened/closed. This works just fine if I only insert this component once in a template. But in my case I am inserting it three times. By using the componentDidM…
How do I pass data between React Functional Components?
Currently, I am trying to pass a specific piece of data, the user’s name, from one functional component, the <User/> component, to another, the <Profile /> component, when the user navigates to a certain page. Here is my code: User.js UsersList.js Feed.js App.js And here is the current <P…
How to update the state in React Redux?
I’m using a reducer to set the state in Redux. My state currently looks something like this. In my old reducer, I was just getting the conversations array and setting that but now I need access to the activeConversation string as well. Therefore, I decided to use my root reducer which combines everythin…
Improving scroll effect with one side scroll and the other change image based on scroll position
I created this scroll effect, where div is divided into left and right side – left side contains of images, that change based on scroll position and it’s fixed and right side is scrolling content. This is my idea: https://codesandbox.io/s/scroll-effect-forked-ssi3x?file=/src/index.css To describe …
convert dateTime format in react js
i have this date : Mon Aug 23 2021 15:03:00 GMT+0430 (Iran Daylight Time) how to convert this format: 2021-10-10T00:00:00 Answer You can do it as follows: If you don’t prefer the native way of converting it you can use the library Moment.js. Your code would look as follows: If you don’t want to ke…
TypeError: a.preventDefault is not a function
I’m trying to register auth with firebase using the name, email and password, but when I tried to register with that info then give me an error, like this: TypeError: a.preventDefault is not a function I’m sure my firebase connect is ok, because before I have save post data from this project, so, …
How to configure craco to use jsx?
I am using craco and trying to figure out how to configure jsx. I keep getting the following error Support for the experimental syntax ‘jsx’ isn’t currently enabled (4:17): They suggest that I add `babel/preset-react or use @babel/plugin-syntax-jsx to the plugin section to enable parsing but…
How can I fix “Failed to compile src/index.js ‘firebase’ is not defined no-undef”?
I am trying to use a React web app to read and write stuff in a Firebase realtime database. Every time I run “npm run start”, I get this error message. This is what package.json, src/index.js, build/index.html, and public/index.html looked like when I first got this error. (is it bad to have 2 ind…