Do not mutate state directly. Use setState() react/no-direct-mutation-state
First of all, we should not store the ui components inside state variable, state should contain only data. All the ui part should be inside render
method.
If you want to render
some component on the basis of any data then use conditional rendering. Check the value of this.state.loginButton
and if it is null
then render that button.
Like this:
constructor(props) {
super(props)
this.state = {
loginButton: props.username,
benchmarkList: ''
}
}
render(){
return(
<div>
{!this.state.loginButton ? <GoogleButton></GoogleButton> : null}
</div>
)
}
Ideally we should not store the props
value in state
also, so directly use this.props.username
, i did that because don't know about the complete code.
constructor(props) {
super(props)
this.state = {
loginButton: props.username == null? <GoogleButton></GoogleButton>: '',
benchmarkList: ''
}
}
Or You can use setState in componentWillMount()
componentWillMount(){
let loginButton = props.username == null? <GoogleButton></GoogleButton>: '';
this.setState({loginButton: loginButton});
}