score:2

Accepted answer

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.

refer this for more details.

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)
      })
  }

Related Query

More Query from same tag