Cannot Pass State by React-native Context API

Question

I try to pass State and SetState by using useContext. But there someting strange: only one can pass to children compoenents. I want to pass {isLogin, setIsLogin, name}, only name can show correctly like this:

also can run in codesandbox

codesandbox

import React, { useState, createContext, useContext } from "react";
import { Text, View, Button } from "react-native";

const AppContext = createContext();

const AppProvider = (props) => {
  const [isLogin, setIsLogin] = useState(false);
  const [name, setName] = useState("molly");

  return (
    <AppContext.Provider value={(isLogin, setIsLogin, name)}>
      {props.children}
    </AppContext.Provider>
  );
};

const App = () => {
  return (
    <AppProvider>
      <Home />
    </AppProvider>
  );
};
const Home = () => {
  const storedEvents = useContext(AppContext);

  console.log("storedEvents", storedEvents);

  const login = () => {
    storedEvents.setIsLogin(true);
  };
  if (!storedEvents.isLogin) {
    return (
      <View>
        <View>
          <Text>{storedEvents}</Text>
        </View>
        <Button title="login" onPress={() => login()} />
      </View>
    );
  }
  return (
    <View>
      <Text>I am Login.</Text>
    </View>
  );
};

export default App;

vindev · Accepted Answer · 2022-09-28 07:03:36Z

2

You can pass multiple values as the JSON object, so your AppProvider should look something like this.

const AppProvider = (props) => {
  const [isLogin, setIsLogin] = useState(false);
  const [name, setName] = useState("molly");

  return (
    <AppContext.Provider value={{isLogin, name, setIsLogin}}>
      {props.children}
    </AppContext.Provider>
  );
};

Notice the change value={{isLogin, name, setIsLogin}} instead of value={(isLogin, name, setIsLogin)}

There's another issue in the Home component which will give render error. You are trying to display storedEvents object which is not allowed. So change it to text string like Not logged in or something.

edited Sep 28, 2022 at 7:03

answered Sep 28, 2022 at 6:48

vindev

2,2802 gold badges15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shahriar Over a year ago

or maybe JSON.stringify(storedEvents)

MOLLY Over a year ago

vindev Thank you very much. I got it! @Shahriar Thank you too!

Collectives™ on Stack Overflow

Cannot Pass State by React-native Context API

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related