How to manage function component state in NextJS?

Question

I wanna to access a state variable of component 1 in component 2, they are "brothers" components. How can I do this? Only 1 state variable. I'm using nextjs with styled-components and typescript. Also my project have atomic design structure. I wanna to do something like:

const Component1 = (): ReactElement => {
  const [value, setValue] = useState(false);
  return(
    <div>Component 1 code</div>
  );
}

const ComponentRendered = (): ReactElement => {
  const [value, setValue] = useState(false);
  const [shouldRender, setShouldRender] = useState(false);
  
  const conditionalRendering = (component1Variable) => {
    setShouldRender(component1Variable);
  };

  const component2 = (
    <div>Component 2 code</div>
  )

  return {(shouldRender && component2) || <></>};
}


//index.js

const Index = (): ReactElement => {
  return(
    <div>
      <ComponentRendered />
      <OtherComponents />
    </div>
  );
}

Are the conditional components always rendered within the same page/component? — Samuel Goldenbaum, Sep 20 '21 at 23:09

score 1 · Accepted Answer · answered Sep 20 '21 at 21:56

If they are brother components, the state should be managed by the Parent component, and passed as props to them.

I can't really see in your example where you are using Component1, but it could look something like that:

const Component1 = ({ value }): ReactElement => {
  return(
    <div>Component 1 code</div>
  );
}

const ComponentRendered = ({ value }): ReactElement => {
  const [shouldRender, setShouldRender] = useState(false);
  
  const conditionalRendering = (component1Variable) => {
    setShouldRender(component1Variable);
  };

  const component2 = (
    <div>Component 2 code</div>
  )

  return {(shouldRender && component2) || <></>};
}


//index.js

const Index = (): ReactElement => {
  const [value, setValue] = useState(false);
  return(
    <div>
      <ComponentRendered value={value} />
      <Component1 value={value} />
    </div>
  );
}

i really don't think the code he provided is sibling relationship — windmaomao, Sep 20 '21 at 23:49

score 0 · Answer 2 · answered Sep 21 '21 at 01:28

Depending on the usage, you can either use a simple shared state in a parent component or implement a Context provider.

A basic example of shared state in a parent:

import React, { useState } from "react";

interface Component1Props {
  value: string;
  handleValueChange: (value: string) => void;
}

const Component1 = ({ value, handleValueChange }: Component1Props) => {
  return (
    <div>
      Component 1 code. value: {value}
      <br />
      <button onClick={() => handleValueChange("Vader")}>Change</button>
    </div>
  );
};

interface Component2Props {
  value: string;
}

const Component2 = ({ value }: Component2Props) => {
  // create a guard to conditionally display
  if (value === "Anakin") {
    return <></>;
  }

  return (
    <div>
      Component 2 code. value: {value}
      <br />
    </div>
  );
};

export default function App() {
  // shared state
  const [value, setValue] = useState<string>("Anakin");

  return (
    <div className="App">
      <Component1 value={value} handleValueChange={setValue} />
      <Component2 value={value} />
    </div>
  );
}

Implementing Context is a little more involved and better suited to scenarios where multiple components need to share state and functionality.

Here is a basic demo of using context:

How to manage function component state in NextJS?

2 Answers2