I have this parent App.jsx, with two components <Child1/> and <Child2/> imported. This is Child1.jsx, where I have ‘players’ set locally by this.setState(): And here Child2.jsx, which needs ‘players’ as props, given the fact they are fetched at Child1.jsx. I know I can achi…
Tag: reactjs
How can I change “created using create-react-app” in search results?
I am trying to post the link to my portfolio onto linkedin and it always shows up with “Web site created using react app” as the description, which definitely doesn’t make it look professional. It is deployed on my domain but is there any way I can get rid of all the create-react-app default…
How do I stop state element being passed to child component before it is set?
I’m writing a weather forecast app with React. I’m fetching the data from openweathermap.org API. But to use that I need to know user’s location. So I use other API’s in sequence as well to identify user IP, location, and then weather data according to that location. At each fetching s…
nextjs api not working when fetching through isomorphic-unfetch
Im not getting my data (notes) inside the props, it is giving undefined when im using console.log(notes). My backend api is also in the same project in /pages/api/notes/index.js The api which im calling is ‘http://localhost:3000/api/notes’ Even my api is working fine when im testing it on postman.…
Is there a way to not reload the whole html body with React Routers?
My React project’s App.js file has routes like so: In my Navbarr component, I have Links that set the routes, e.g.: When I click on any of the links, I would like it to just change the component in my <Switch>. Instead, it seems to re-load the whole html body (my background component flashes, even…
How to play animation only when the element is on screen
I’m working in React, and I need to know when an element is on screen to play a fade animation, and make it appear on screen. Because the animation always plays when the page is loaded, but if you have to scroll to see the element, then you’ll never see the animation 🙁 In my CSS file I have: What…
How to pass data from mapped objects to its parent component in React?
I’m building a shopping cart app, the app includes each item as a card component. I rendered these cards by mapping some dummy object data like this: and the Card component being rendered: Now on click of the button in each card, I’d like to send the data (the id of the card and the price of the i…
React JS custom table – handling select dropdown in table
A bit of context for this table – I want to create a table where user can select an option in the dropdown on the table header and compare. So this table has two columns and each column represents the data that’s been selected. What I want to achieve is when one is selected say business in column …
React JS Animated accordion – built using details and summary
I’m currently building a custom accordion in React using <details /> and <summary /> Here’s what I have so far – codesandbox As you can see in the codesandbox, a weird problem is happening. Every time I click on one of the accordions, only the last item’s content shows up. …
How to Extend Eslint to work with create-react-app
I’m working on a React application and I would like to have a linter set up so that I can see all the warning/errors in the console. The docs doesn’t say much: https://create-react-app.dev/docs/setting-up-your-editor/ I have added EXTEND_ESLINT=true in my .env.dev file and I have created a .eslint…