score:1
the selectedpokemon
would be undefined
untill the request to pokemon.url
finishes.
and thus, initially the <pokemonmodal .../>
will receive pokemon
as undefined
. because of which, you are seeing the error.
one way to solve it would be to have an if
in the pokemonmodal
component:
const pokemonmodal = ({showmodal, closemodal, pokemon}) => {
if(pokemon && object.keys(pokemon).length !== 0) {
// prepare the view and return it
}
return null;
}
you can also have an if
on your parent component too, but generally speaking, i like to have the if
in child component so that the parent component would not get cluttered by so many if
s
score:0
setstate
is async, that's why your component is failing, as you are opening the modal, but the state might not have been set and propagated to the children yet.
one way to solve this is to add a loading state to your modal.
return (
pokemon&&{
<modal>
<modal.title>{pokemon.name}</modal.title>
</modal>
}
)
score:1
the reason you get a typeerror
, is because you initialize your state with null
, and while waiting to the response the modal tried to read the name property of pokemon.
you need to handle the case when there is no pokemon set yet inside the modal,
when rendering you can add
const pokemonmodal = ({showmodal, closemodal, pokemon}) => {
if (!pokemon) {return "loading..."}`
}
or some loading spinner.
no need to use json in here imho
Source: stackoverflow.com
Related Query
- How to separate out a JSON Object for a reusable React table component
- How to send JSON object to a component in React?
- How to map through a json object that is stored in a react component not coming from an api?
- React how to send object to sub-component when object is held in state of parent component and dynamically updated
- react (class based) : How can I update JSON object in parent component using setState after the object being passed in function from child to parent?
- How to send array of objects data from child component to parent component and store in the parent object using react hooks?
- React Typescript how send props and use it in child component
- how to send value one component to another component in react js?
- react native how to filter data with some key object on json
- React JS: How to send an event down the component tree?
- How to update parent state from child component in React + send a paramater
- React js useState hook. How to update state of a json object with an a array in it when a checkbox is clicked
- How to send a fetch post request from react component to backend
- React Ionic 5: How to pass object from App component to Tab component
- How to update a json object request string values to NUMBER in REACT
- How to send JSON object from express server to next js page?
- How to send props to a component in react with conditional?
- How to update the state of nested json object in react using hooks
- React object how to wrap more than one component
- How to make a react table whose rows and columns come from a JSON object
- How to render this JSON object in react js
- How react functional component can use object variable which declared behind the usage? (include example)
- How to make a list from json object using React
- How to dynamically build an object for a React Component using props?
- How to send state from Child component to another component in React
- How to structure a component using React Hooks with an object that uses the DOM directly? (such as OpenLayers)?)
- How do I send data from child component to parent component in React
- How do I create a new JSON object inside a react hook?
- How do I obtain a value from JSON object in a React render function?
- How Can i Add Event Handlers In Reusable React Component Created from Object Array
More Query from same tag
- How to Change Button text in React using useState
- How to share Session storage data with other opened browser tabs in React
- React / Redux TypeError: Cannot call a class as a function
- Material UI: Popover breaks when using onMouseLeave prop
- How to conditionally remove value attribute using react
- material ui always return 0 onchange
- How to fetch data for a reusable layout component in Next.js
- Axios & Typescript give error from promise rejection a type
- React first gives null values and after a while values are initialized
- origin has been blocked by CORS policy Spring boot and React
- Why aren't these two versions of a higher order function giving the same results?
- chai-redux-mock-store - ReferenceError: createMockStore is not defined
- how do i dynamically reference an image in react?
- Bootstrap tables not displaying correctly in Jsfiddle React code
- How can I have multiple sibling instances of the same top level fragment container?
- Reactjs Add spinner when click button
- How to use next() function in Next JS API like Express JS?
- Pass multiple onclick handler functions to child component
- How to put a div inside a Switch with React Router?
- JSX can be used without importing React
- When does this click test fail/pass
- Load login page without Sidebar, Navbar and Dashboard in React
- Playing audio file from Firebase Storage works locally, but not on deployed appliation
- even pesudo class not working tailwindcss reactjs
- How to display the information submitted in the html form on another page using react js?
- React-admin TextField in List component shows "null". Can I convert this to blank?
- How to remove items in React?
- React & require: Error: Cannot find module "."
- Correct types for FunctionComponent HOC
- Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body in react-admin