How to render if..else if...else type in React functional component?

Question

I am using React hooks and following is the conditional rendering which I want to achieve where sortDirection is a state. I want to render one of the <i> tag based on sortDirection. How can I achieve this ?

    if (sortDirection == "ascending") {
        return <i onclick={() => setSortDirection('descending')} className="fa fa-arrow-down" />
    } else if (sortDirection == "descending") {
        return <i onClick={() => setSortDirection('random')} className="fa fa-arrow-up" />
    } else {
        return <i onClick={() => setSortDirection('ascending')} className="fa fa-arrow-h" />
    }

React hooks don't change anything that would apply to the code you're showing. That code would look no different for a function component. — Ryan Cogswell
– Ryan Cogswell, Commented Mar 8, 2019 at 15:50
Can you explain your question a bit more? What you've done seems to already answer your question unless I'm not understanding you? — Tom Finney
– Tom Finney, Commented Mar 8, 2019 at 15:55

victor zadorozhnyy · Accepted Answer · 2019-03-08 15:57:11Z

1

You can just create a separate functional component and having the condition as a prop

const MyIComponent = (sortDirection) => {
  if (sortDirection == "ascending") {
        return <i onclick={() => setSortDirection('descending')} className="fa fa-arrow-down" />
    } else if (sortDirection == "descending") {
        return <i onClick={() => setSortDirection('random')} className="fa fa-arrow-up" />  }

    return <i onClick={() => setSortDirection('ascending')} className="fa fa-arrow-h" />
}

const MainComponent = () => <myIComponent sortDirection={sortDirection} />

edited Mar 8, 2019 at 15:57

answered Mar 8, 2019 at 15:45

victor zadorozhnyy

9771 gold badge13 silver badges27 bronze badges

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

1 Comment

rockfight Over a year ago

Rather than creating a separate component I just created a const DirectionIcon = {the above conditional render} and in return wrote <DirectionIcon /> . As in your comment you defined myIComponent I think the first letter should be capital for react to recognize it as a React component. Apart form that all went good. Thanks.

Sicco · Accepted Answer · 2020-09-23 12:42:35Z

0

const MyIComponent = ({sortDirection, iClassName}) => {
  return <i onclick={() => setSortDirection(sortDirection)} className={iClassName} />
}

You can pass sortDirection and iClassName dynamically from main component as a props then if conditions also you can avoid.

edited Sep 23, 2020 at 12:42

Sicco

6,3395 gold badges49 silver badges63 bronze badges

answered Mar 8, 2019 at 16:00

Avick Mukherjee

331 gold badge3 silver badges12 bronze badges

1 Comment

Avick Mukherjee Over a year ago

const myIComponent = ({sortDirection, iClassName}) => { return <i onclick={() => setSortDirection(sortDirection)} className={iClassName} /> }

Collectives™ on Stack Overflow

How to render if..else if...else type in React functional component?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related