Learn More
Resend Email
2
Meleeman
1y

is it bad to put your jsx in useState for react?

const = handleClick = (sort) => {
if(sort.props.id == 'default'){
setSort(<ArrowUpward id='up'/>)
}
else if(sort.props.id == 'up'){
setSort(<ArrowDownward id='down'/>)
}
else if(sort.props.id == 'down'){
setSort(<LineAxis id='default'/>)
}
}

the other alternative is using template logic which i think looks uglier, someone told me i did server side rendering in the browser

question

react jsx usestate
Favorite
Ranter
Comments
  • 0
    1y
    It doesn't feel *right* imo.
    I mean state is supposed to be data. Not sure what you mean by template logic.

    Why not set it as a constant and use pattern matching to return the appropriate jsx?

    oh. serSort(props.sort.id)

    I think this is better than returning jsx because then the rest of the component can also do things based on what the value of sort is (if needed)

    Otherwise all they can use is a jsx
  • 0
    1y
    As a rule I never store JSX. It gets generated by some functions and helpers synchronously before returning. There's nothing wrong with template logic that could be improved by moving the elements (and therefore eventually random style settings) away from the rendering phase.
devRant © 2021 Hexical Labs LLC
Privacy Policy  |  Terms of Service
Add Comment