Can if...else... statements be used in React render functions?
P粉020556231
P粉020556231 2023-10-10 23:49:38
0
2
537

Basically, I have a react component and its render() function body is as follows: (This is my ideal component, which means it doesn't currently work)

render(){
    return (
        <div>
            <Element1/>
            <Element2/>

            // note: logic only, code does not work here
            if (this.props.hasImage) <ElementWithImage/>
            else <ElementWithoutImage/>

        </div>
    )
}


P粉020556231
P粉020556231

reply all(2)
P粉985686557

There is actually a way to do exactly what the OP asked for. Just render and call the anonymous function like this:

render () {
  return (
    
{(() => { if (someCase) { return (
someCase
) } else if (otherCase) { return (
otherCase
) } else { return (
catch all
) } })()}
) }
P粉521013123

Not exactly the same, but there is a workaround. There is a section about conditional rendering in the React documentation that you should take a look at. The following is an example of what you can do using inline if-else.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    
{isLoggedIn ? ( ) : ( )}
); }

You can also handle it inside the render function, but before returning jsx.

if (isLoggedIn) {
  button = ;
} else {
  button = ;
}

return (
  
{button}
);

Also worth mentioning is what ZekeDroid brought up in the comments. If you are just checking a condition and don't want to render a specific piece of code that doesn't meet the condition, you can use the && operator.

return (
    

Hello!

{unreadMessages.length > 0 &&

You have {unreadMessages.length} unread messages.

}
);
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template