React Native useContex

Question

import React from 'react';

export function useAuth() {
  const [name, setName] = React.useState('Sa');

  return {name, setName};
}

import {createContext} from 'react';

export const UserContext = createContext();

import React from 'react';
import {useAuth} from './userHook';
import {UserContext} from './userContext';
import Pagesd from './pagesd';

export default function () {
  const {name} = useAuth();
  return (
    <UserContext.Provider value={name}>
      <Pagesd />
    </UserContext.Provider>
  );
}

import React from 'react';
import {View, Text} from 'react-native';
import {UserContext} from './userContext';

function Pagesd() {
  const {name} = React.useContext(UserContext);
  return (
    <View>
      <Text>{name}</Text>
    </View>
  );
}
export default Pagesd;

I expected the function useAuth to see Sa Pagesd () typed where am I doing wrong

I want to do the case management, but the name comes in the app js, but I cannot access the children.

please don't link to images. add the code directly in the quetion — Iosif, Oct 22 '20 at 18:17
Do you see any errors? What does the component `Pagesd` look like? — evolutionxbox, Oct 22 '20 at 18:29
@OnurYıldırım no need to apologise. We’re trying to help. — evolutionxbox, Oct 22 '20 at 18:39
May you please explain the issue again? What do you mean by “cannot access the children”? — evolutionxbox, Oct 22 '20 at 18:43
Pass in the value in an object instead? `value={{name}}` At the moment it’s being passed in as a value, but the Pagesd component is destructuring it out. — evolutionxbox, Oct 22 '20 at 18:49
@evolutionxbox yes it worked, what's the difference between this single brace and pair, many many thanks — Onur Yıldırım, Oct 22 '20 at 18:52

evolutionxbox · Accepted Answer · 2020-10-22T19:01:08.077

The code shown so far is correct, with one exception.

const {name} = React.useContext(UserContext);

The value name is being destructured from the return of useContext. This is fine if the value being given is an object, but I assume it's not.

<UserContext.Provider value={name}>

If name is not an object, but a string, then the destructure will not work, and name will be undefined.

To solve this you have two options:

Do not destructure the name value

const name = React.useContent(UserContext);

Pass the provider an object

<UserContext.Provider value={{name}}>

React uses curly braces {} to denote a JavaScript expression, whereas the inner curly braces is an object literal property value shorthand.

React Native useContex

1 Answers1