Functions are not valid as a React child when trying to inject useState Element inside a div-CodePudding

i get this Error when i tried to inject this Element inside a div using {setpickupcoord}

 const [pickupcoord, setpickupcoord] = useState();
  const [dropoffcoord, setdropoffcoord] = useState();

  //Pick Up Section

  let GetPickup = () => {
    let pickup = "Skoura Mdaz";

    fetch(
      `https://api.mapbox.com/geocoding/v5/mapbox.places/${pickup}.json?`  
        new URLSearchParams({
          access_token:
            "pk.eyJ1IjoiZW5naW5uZXJkciIsImEiOiJja3ZtOW55bGEweGNiMnhvdTBzM2oydGt1In0.UrfgWtDHRAvLZSgD8ruhVA",
          limit: 1,
        })
    )
      .then((res) => res.json())
      .then((data) => {
        setpickupcoord(data.features[0].center)
      });
  };

`Here Use Effect Goes `

  useEffect(() => {
    GetPickup();
    GetDroopOf();
  },[]);
  return (

    <Wrapper>
      <Map />
      <ContainerItems>
        <Headtitile>
          <Header>
<Title>Pickup: {setpickupcoord}
</Title>
                  </Header>
        </Headtitile>
      </ContainerItems>
    </Wrapper>
  );
}

When I inject {setpickupcoord} inside Title tags i get this Error

This is The Error

This is The page am working on it's an empty div

CodePudding user response：

setpickupcoord is a function. pickupcoord would be a more appropriate thing to place in the component's return function.

https://reactjs.org/docs/hooks-state.html

CodePudding user response：

You can't use setpickupcoord inside a react component body, because it's type is React.Dispatch, instead you can use it like this snippet.

const something = () => {
        const [state, setState] = React.useState(false);
        return (
                <div onClick={() => setState(!state) }>
                        <p>Toggle</p>
                </div>
        );
}