CODEWITHSUNDEEP
reactjsreact-nativereact-hooks
RaphaelLima
RaphaelLima

Reputation: 27

How to pass the useState method to a component and this component returns the state?

My Home.js file I have:

  const [location, setLocation] = useState({});

<Search setLocation={{ setLocation }} />

In my Search.js file I have:

const Search = (setLocation) => (
  <Container>
    <GooglePlacesAutocomplete
      placeholder="Onde você esta?"
      onPress={(data, details) => {
        setLocation(data, details.geometry.location);
      }}

some code...

I got this error: setLocation is not a function. setLocation is an instance of object

How can I change the location State?

Upvotes: 0

Views: 71

Answers (3)

miraj
miraj

Reputation: 586

From React js official docs, you should lift state like this:

const [location, setLocation] = useState({});
const handleLocation = (args) => {
  setLocation(args)
}
<Search onLocationChange={ handleLocation } />

Search.js

const Search = ({onLocationChange}) => (
  <Container>
    <GooglePlacesAutocomplete
      placeholder="Onde você esta?"
      onPress={(data, details) => {
        onLocationChange(data, details.geometry.location);
      }}

some code...

Upvotes: 0

Lakshman Kambam
Lakshman Kambam

Reputation: 1618

first thing you're sending method to Search component in object. so you are getting this

error: setLocation is not a function. setLocation is an instance of object

you are trying to execute nested object {{setLocation}} onPress GooglePlace.

send method as a prop like this

<Search setLocation={setLocation} />

than you get setLocation as object in Search component like this

{setLocation}

change your Search component this way

const Search = ({setLocation}) => (
  <Container>
    <GooglePlacesAutocomplete
      placeholder="Onde você esta?"
      onPress={(data, details) => {
        setLocation(data, details.geometry.location);
      }}
     />
</Container>
)

Upvotes: 1

D&#225;niel Boros
D&#225;niel Boros

Reputation: 403

Try this form.

<Search setLocation={setLocation} />
const Search = ({setLocation}) => (...

Upvotes: 0

Related Questions