My App/website will have the same components for registered users and and non-registered users. Except that they behave a little differently.
What is the industry standard way to design this?
To create 2 separate components? Or to create 1 integrated component?
If the components is not drastically changes than i suggest keeping the same components as change their click functionally accordingly though a if statement.
const [comment, updateComment] = useState("")
const isLogin = false // should come from some global state managment(ex : redux)
handleClick = () => {
if (isLogin) {
// Post a comment
} else {
// Redirect to login page
}
}
return <div>
<input type="text" value={comment} onChange={e => updateComment(e.target.value)} />
<button onClick={handleClick}> Post a comment</button>
</div>;
}