React condition rendering component typescript

Question

I have a component called Visible with two props: condition and children the flow is if the condition is true the component will return the children(s) and if not it will return null (just like condition rendering), but VScode doesn't recognized that what the condition is doing and throw an error for children (the variable may be null)

is there a way to define a type for this component return that VScode recognizes the condition checks the variables?

Visible.ts:

interface IVisible {
    condition: any
    children: React.ReactNode
}

function Visible(props: IVisible) : React.ReactNode {
    const {condition, children} = props

    if( !(!!condition) ) return null;
    
    return <Fragment>{children}</Fragment>
}

usage ex:

const [banana, setBanana] = useState<undefined|string[]>(["foo","bar"])

return (
    <Visible condition={banana}>
        <ul>
        {banana.map(e => <li key={e}>{e}</li>) }
        </ul>
    </Visible>
)

It will be easier for you to figure out the problem if your condition prop is boolean, as it should be. Then you can just think about how to convert that array to a boolean before passing it as a prop. — Arnas Savickas
– Arnas Savickas, Commented Oct 17, 2021 at 12:33

Ivan Popov · Accepted Answer · 2021-10-17 13:34:51Z

1

Try this! Declare return type is JSX.Element

interface IVisible {
    condition: boolean;
    children: React.ReactNode;
}

const Visible = ({ condition, children }: IVisible): JSX.Element =>
    condition ? <Fragment>{children}</Fragment> : null;

But I still recommend using just conditional rendering.

I don’t understand why to make a component when there is an already implemented opportunity for this.

When there are additional calculations or some other peculiarities, then yes, you can make a component.

But when you just need to render a component by a simple condition, it seems to me that you shouldn't make an additional component for this.

const [banana, setBanana] = useState<string[]>(['foo', 'bar']);

return (
    <div>
        banana.length > 0 && (
            <ul>
                {banana.map(e => (
                    <li key={e}>{e}</li>
                ))}
            </ul>
        )
    </div>
);

edited Oct 17, 2021 at 13:34

answered Oct 17, 2021 at 13:19

Ivan Popov

7063 silver badges11 bronze badges

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

4 Comments

randomsab Over a year ago

thanks, I understand about additional calculations and peculiarities, but each project has its own situation, creating a conditional rendering component instead of using {condition ? : null} helps code reading in a large project (especially in large groups), so sometimes you can pay more for better and cleaner code reading

Ivan Popov Over a year ago

@msaba Ok, yes I agree, it makes sense for readability of the code. Now, I understand your intent. Good coding and good luck :)

Ivan Popov Over a year ago

@msaba Did you get the error after changing the type to JSX.Element?

randomsab Over a year ago

no it's fine by me

Collectives™ on Stack Overflow

React condition rendering component typescript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related