CODEWITHSUNDEEP
reactjsreact-nativereact-typescript
Junior
Junior

Reputation: 147

How to pass useState data to another .tsx file?

I'm fairly new to react native and can someone help me understand and explain how to pass data to a different .tsx file?

Here are some of my code and to show what I was trying to do.

ToggleSettings.tsx

interface ToggleSettingProps {
  id: string
}

const ToggleSettings = ({
  id
}: ToggleSettingProps) => {
  const [toggled, setToggled] = useState(false);

  return (
   <Box>
     <Switch name={id} isChecked={toggled} onToggle={setToggled} />
   </Box>
  );
};

export default ToggleSettings;

NotificationsScreen.tsx

const ToggleStatus = false; //this property should get the value of toggled from ToggleSettings.tsx

const NotificationsScreen extends React.Component {
 render() {
  return (
   <Box>
     <ToggleSettings
      id={'notif_Main'}
    />
    <Divider marginY="3" />
    {ToggleStatus && ( //As condition to show the other ToggleSettings
      <>
        <ToggleSettings
          id={'notif_DailyFollowUps'}
        />
     </>
    )}
   </Box>
  );
};

Basically, all I need is to get the value of "toggled" in ToggleSettings.tsx in order to use it as a conditional data in NotificationsScreen.tsx

Upvotes: 0

Views: 2842

Answers (2)

Erfan
Erfan

Reputation: 1802

As React supports Parent-Child data flow with props, I suggest you define the toggled state inside the Parent (NotificationsScreen), then pass both toggled and setToggled to Child (ToggleSettings)

In NotificationsScreen.tsx

    function NotificationsScreen (){
      const [toggled, setToggled] = useState(false)
      const [otherToggleState, setOtherToggleState] = useState(false);

     render() {
      return (
       <Box>
         <ToggleSettings
          id={'notif_Main'}
          toggled={otherToggleState}
          setToggled={setOtherToggleState}
        />
        <Divider marginY="3" />
        {ToggleStatus && ( //As condition to show the other ToggleSettings
          <>
            <ToggleSettings
     
              id={'notif_DailyFollowUps'}
            />
         </>
        )}
       </Box>
      );
    };

In ToggleSetting.tsx

    const ToggleSettings = (props: ToggleSettingProps) => {

  return (
   <Box>
     <Switch name={props.id} isChecked={props.toggled} onToggle={props.setToggled} />
   </Box>
  );
};

export default ToggleSettings;

Upvotes: 1

Alessandro Scandone
Alessandro Scandone

Reputation: 157

You have to "lift up" the state to the NotificationsScreen component.

ToggleSettings.tsx

interface ToggleSettingProps {
  id: string
  isChecked: boolean
  onToggle: (b: boolean) => void
}

// React.FC provides better function component typing
const ToggleSettings: React.FC<ToggleSettingsProps> = ({
  id,
  isChecked,
  onToggle,
}) => (
   <Box>
     <Switch name={id} isChecked={isChecked} onToggle={onToggle} />
   </Box>
);


export default ToggleSettings;

NotificationsScreen.tsx


const NotificationsScreen: React.FC = () =>  {
  const [toggled, setToggled] = useState(false)

  return (
   <Box>
     <ToggleSettings
      id="notif_Main"
      checked={toggled}
      onToggle={setToggled}
    />
    <Divider marginY="3" />
    {toggled && ( //As condition to show the other ToggleSettings
        <ToggleSettings
          id="notif_DailyFollowUps"
        />
    )}
   </Box>
  );
}

Upvotes: 1

Related Questions