Is it possible to assign an onClick function when performing a conditional render outside of the React return statement?
I tried adding code on Stackoverflow but couldn't get any syntax help or eslint after spending an hour in their editor. :D
section:hover {
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
<script type="text/babel">
const RotateOnClick = ( {rotated, handleChange} ) => {
if (rotated) {
return <section onClick={handleChange}>I'M ROTATED! Click me to rotate again!</section>
} else {
return <section onClick={handleChange}>I'm not rotated. Click me to rotate!</section>
}
}
class Rotator extends React.Component {
// Change state to true to see that it renders if toggled
state = {
isRotated: false
}
toggleRotation = () => {
// Outdated initial code when asking the question
// console.log("React doesn't like me. It will never call me :( ")
console.log("Yei, it works! React likes me again")
const { isRotated } = this.state
this.setState( {isRotated: !isRotated })
}
render() {
const { isRotated } = this.state
let conditionalRender;
if (isRotated) {
conditionalRender = <RotateOnClick rotated handleChange={this.toggleRotation} />
} else {
conditionalRender = <RotateOnClick handleChange={this.toggleRotation} />
}
return (
<div className="hover">
{conditionalRender}
</div>
);
}
}
ReactDOM.render(
<Rotator />,
document.getElementById('root')
);
</script>