How to condition the rendering of React function with hooks?

Question

I'm trying to condition the rendering of different React function components, according to specific parameters.

For example, I want to render ComponentA if an input field includes only a number, or ComponentB otherwise. I use a switch case that returns the component that corresponds with the right case. Important to mention that each of the components includes different hooks (different numbers of states e.g).

When I run the program, I get an error that a different number of hooks is rendered. What is the right way to accomplish this? Currently I'm using a class that extends the React Component class since it does not use Hooks, but I'm trying to find a solution that allows me to use them.

edemaine · Accepted Answer · 2021-07-11 16:29:12Z

1

You only need to use the same number of hooks within each component. If you return a component (rather than directly calling the component function), each component can use a different number of hooks. For example:

function Component(props) {
  const [field, setField] = useState('');
  const isNumber = !isNaN(parseInt(field)); // or however you want to detect numbers
  //...
  return (
    <div>
      <input value={field} onChange={(e) => setField(e.target.value)}/>
      {isNumber && <Component1/>}
      {!isNumber && <Component2/>}
    </div>
  );
}

answered Jul 11, 2021 at 16:29

edemaine

3,14015 silver badges23 bronze badges

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

1 Comment

VersifiXion Over a year ago

can even do {isNumber ? <Component1/> : <Component2/>

user3766327 · Accepted Answer · 2021-07-11 16:27:34Z

1

You can do like this

const MainComp = () => {


const customRender = () =>{
    if(val==1){
        return(<Comp1>)
    }else{
    return (<Comp2>)
    }
}

return(
    <div>
        {customRender}
    </div>
)
}

answered Jul 11, 2021 at 16:27

user3766327

211 bronze badge

Collectives™ on Stack Overflow

How to condition the rendering of React function with hooks?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related