I receive data in react using axios but when i try to map through it i get an error "Cannot read properties of undefined (reading 'map')" I was trying to find solutions to this and i think that react first…
I'm trying to create a react component (NextJS), which is a hexagon with an image inside it. The component should render the image that was sent as a prop. However, when I try to use multiple components with different images…
The SVG that is meant to mask the image lies under the image and isn’t masking it. Also, adding WebkitMask to the inline style makes the image disappear from live server page. I'm using CSS modules, hence the inline styling…
I have been working on an SPA with React 18 and The Movie Database (TMDB) API. I am now working on adding transitions between routes (pages) with the help of Framer Motion. For this purpose, I have added a transition.js…
I'm working on an ecommerce project and I'm trying to put all the product selected in the cart dropDown thats shows up in the icon. I did the key id but it still ask me to give an id to…
I have a component that needs to render an array of divs, the array should add another div after a certain function outside the component is triggered, the function is outside the component because it needs to be exported. The…
I have a component that needs to render by condition, I'm confused between the two ways like the code below and I am figuring out the recommended way of React. What is the best way to set render conditions for…
I have been working on an SPA with React 18 and The Movie Database (TMDB) API. I am curenly working on the search functionality. There is a list of search results, as seen below. For a nice scrollbar on this…
So I have a technical misunderstanding of react function component re-renders or some sort, when they happen exactly. In the provided basic app, whenever I click on the theme icon on the far left of the navbar(Header.js component), a click…
I have this jsx <div className="row" > {data!== undefined && data.length !== 0 ? ( data.map((el) => ( <div className="col col-lg-2 col-md-6 g-3" key={el._id}> <div className="card"> <div className="card-body"> <p className="card-text fw-bold fs-5">{el.name}</p> </div> </div> </div> )) ) : ( <p>no…