score:2
you are initializing recipeinfo
as a string, updating it as an array of react objects and accessing them (when passing props to pagecontainer) as api data response object.
you can't access recipe_name
as
recipeinfo[0].recipe_name
.
update your state initialization as:
const [recipeinfo, setrecipeinfo] = usestate([])
then check for data before accessing it, as:
<pagecontainer
recipename={recipeinfo.length ? recipeinfo[0].recipe_name:""}
/>
also you should store the array returned from api in recipeinfo
state instead of storing elements. move the mapping of data to return of pagecontainer
(this isn't needed if you are using only the first element of the array) .
what should go in state?
state should contain data that a component's event handlers may change to trigger a ui update. in real apps this data tends to be very small and json-serializable. when building a stateful component, think about the minimal possible representation of its state, and only store those properties in state.
so update the retrieverecipe
function as
const retrieverecipe = function (e) {
e.preventdefault()
console.log(name)
fetch(`http://localhost:3001/getjoinedrecipes/?name=${name}`,
{
method: 'get',
headers: { 'content-type': 'application/json' },
})
.then((resp) => resp.json())
.then((json) => {
setrecipeinfo(json)
})
}
Source: stackoverflow.com
Related Query
- React Router: TypeError Cannot read properties of undefined (reading 'originalPositionFor')
- Cannot read properties of undefined (reading 'params') Uncaught TypeError whilte fetching data from JSON
- Uncaught TypeError: Cannot read properties of undefined (reading 'length') in my react app
- Uncaught TypeError: Cannot read properties of undefined (reading 'source') react v16
- React Router Error - Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pathname')
- React Swiper: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addClass')
- Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase') React - Redux
- Uncaught TypeError: Cannot read properties of undefined (reading 'image and name') in React JS, When trying to view image from specific id
- Keycloak Roles: Uncaught TypeError: Cannot read properties of undefined (reading 'roles') - React
- React - Uncaught TypeError: Cannot read properties of undefined (reading 'setState')
- How to solve Uncaught TypeError: Cannot read properties of undefined (reading 'map') in React
- Uncaught TypeError: Cannot read properties of undefined (reading 'map') & React Props Rules
- React Fetch API + WordPress REST API Localhost Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'posts')
- Uncaught TypeError: Cannot read properties of undefined (reading 'params') - React
- React MUI 4 SelectInput.js:340 Uncaught TypeError: Cannot read properties of undefined (reading 'value')
- React - uncaught TypeError: Cannot read property 'setState' of undefined
- react router v^4.0.0 Uncaught TypeError: Cannot read property 'location' of undefined
- React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined
- Uncaught TypeError: Cannot read property 'toUpperCase' of undefined react state item
- Ag-grid React Table TypeError: Cannot read properties of undefined (reading 'setAriaColIndex')
- React - TypeError: Cannot read properties of undefined (reading 'params')
- React - Uncaught TypeError: Cannot read property 'func' of undefined
- Testing React Redux - cannot read properties of undefined, or wrapper undefined
- Uncaught TypeError: Cannot read property 'value' of undefined in REACT JS
- TypeError: Cannot read properties of undefined (reading 'MethodInfo') in react js app using grpc-web
- Cannot read properties of undefined (reading 'indexOf') with Firebase v9 Modular React JS
- Uncaught TypeError: Cannot read property 'map' of undefined with React
- TypeError: Cannot read properties of undefined (reading 'prototype') React Typescript + Express
- Cannot read properties of undefined (reading 'direction') React JS Material Table
- Uncaught TypeError: Cannot read property 'state' of undefined - React
More Query from same tag
- Trying to populate BootstrapTable with the data from the API
- Why am I getting a warning about synthetic events in my React Redux reducer?
- React TypeScript callback reading undefined when using setState, but it will log the value
- React: Infinite loop when using custom hook inside of useEffect?
- Is there a standard design pattern for viewing + editing a record in React / Material-UI?
- Firebase object value return only if condition is met
- componentWillReceiveProps do not fire
- TypeScript: JSX element type does not have any construct or call signatures
- StreamedResponse in Symfony4
- Can't seem to display image using require or uri on React Native! What am I doing wrong?
- Can't call class functions from main, "is not a function" error
- Cloning github project in react
- What is the best way to trigger an redux action if the props changed after the react 16.3?
- React, update chexkbox properly
- How to create new elements with React mapping props
- Unknown error acquiring position GeolocationPositionError code 2 - Firefox Linux Mint
- React: Change width of progress bar from state
- Cannot read property 'map' of undefined in react/redux
- how to clear data of useState when route get changed
- I can't Change text in the form in React
- How can you incorporate the error page that create-react-app uses into a custom project?
- How to create a privately shared component library which can be used across multiple react projects
- I am getting error while calling functions inside mapped array in React JS
- Tensorflowjs Unhandled Rejection (Error): The shape of dict['input_1'] provided in model.execute(dict) must be [-1,380,380,1], but was [1,380,380,3]
- How to remain state when page refresh in react?
- property missing in returned json response / javascript
- Converting HTML to Draft-JS ContentState in Python/Django
- React Rollup: 'name' is not exported by node_modules/
- 2 blocks with overflow:scroll inside each other
- React setState overwriting an array state