Agfdhyk

First of all, I'm really new into React, so forgive my lack of knowledge about the subject.

As far as I know, when you setState a new value, it renders again the view (or parts of it that needs re-render).

I've got something like this, and I would like to know if it's a good practice or not, how could I solve this kind of issues to improve, etc.

class MyComponent extends Component {

    constructor(props) {

        super(props)

        this.state = { 

            key: value

        }

        this.functionRender = this.functionRender.bind(this)

        this.changeValue = this.changeValue.bind(this)

    }

    functionRender = () => {

        if(someParams !== null) {

            return <AnotherComponent param={this.state.key} />

        }

        else {

            return "<span>Loading</span>"

        }

    }

    changeValue = (newValue) => {

        this.setState({

            key: newValue

        })

    }

    render() {

        return (<div>... {this.functionRender()} ... <span onClick={() => this.changeValue(otherValue)}>Click me</span></div>)

    }

}

Another component

class AnotherComponent extends Component {

    constructor (props) {

        super(props)

    }

    render () {

        return (

            if (this.props.param === someOptions) {

                return <div>Options 1</div>

            } else {

                return <div>Options 2</div>

            }

        )

    }

}

The intention of the code is that when I click on the span it will change the key of the state, and then the component <AnotherComponent /> should change because of its parameter.

I assured that when I make the setState, on the callback I throw a console log with the new value, and it's setted correctly, but the AnotherComponent doesn't updates, because depending on the param given it shows one thing or another.

Maybe I need to use some lifecycle of the MyComponent?

Edit

I found that the param that AnotherComponent is receiving it does not changes, it's always the same one.

I would suggest that you'll first test it in the parent using a simple console.log on your changeValue function:

changeValue = (newValue) => {

    console.log('newValue before', newValue);

    this.setState({

        key: newValue

    }, ()=> console.log('newValue after', this.state.key))

}

setState can accept a callback that will be invoked after the state actually changed (remember that setState is async).

Since we can't see the entire component it's hard to understand what actually goes on there.
I suspect that the newValue parameter is always the same but i can't be sure.

It seems like you're missing the props in AnotherComponent's constructor. it should be:

 constructor (props) {

    super(props) // here

}

Try replacing the if statement with:

{this.props.param === someOptions? <div>Options 1</div>: <div>Options 2</div>}

also add this function to see if the new props actually get to the component:

componentWillReceiveProps(newProps){

    console.log(newProps);

}

and check for the type of param and someOptions since you're (rightfully) using the === comparison.

First, fat arrow ( => ) autobind methods so you do not need to bind it in the constructor, second re-renders occur if you change the key of the component.

Ref: https://reactjs.org/docs/lists-and-keys.html#keys