Не удается получить данные в реквизит в JS реагируют

Question

Ниже приведен мой код для извлечения данных из firebase и просмотра их в загрузочной карусели. Я вижу значения в консоли, но не могу получить их в подпорке для другого компонента.

class JobOfferSlider extends Component {
    componentDidMount = () => {
        var ref = fire.database().ref("Employers/Employer1");
         ref.orderByKey().on("child_added", (snapshot) => {
            this.setState({ slidercontents: snapshot.val()})
            console.log(this.state.slidercontents);
            console.log(this.state.slidercontents.Title)
        });
        var empref = fire.database().ref("Employers/");
        empref.orderByKey().on("child_added", (snapshot) => {
            this.setState({ employers: snapshot.key})
           console.log(this.state.employers);
       });

    }
    state ={
        slidercontents : [], employers : []
    }

и я использую реквизиты в следующем файле jsx

class Slidercontent extends Component {
    componentWillUpdate = ()=>{
        console.log(this.props.employers);
    }
    render() {
       return (
            <div className="col-sm text-center border rounded shadow p-3 m-3">
                <div className="row">
                    <div className="col-md-3">
                        <div className="profilepic"></div>
                    </div>
                    <div className="col-md-9">
                        <h6 className="pt-2 float-left">{this.props.employers}</h6>
                    </div>
                </div>
                <h5 className="font-weight-bold pt-3 text-left">{this.props.slidercontents.Description}</h5> 
                <h5 className="font-weight-bold pt-3 text-left ">{this.props.slidercontents.RatePerHour}</h5>
                <div className="row pt-3">
                    <div className="col-md-2">
                        <div><i class="fas fa-map-marker-alt"></i></div>
                    </div>
                    <div className="col-md-5">
                        <p className="float-left">{this.props.slidercontents}</p>
                    </div>
                    <div className="col-md-5">
                        <p className="float-right">5 mins ago</p>
                    </div>
                </div>
            </div>
        );
    }
}

Но реквизит остается неопределенным .... какая-нибудь помощь по доступу к значениям состояния?

Answer 1

Передать состояние родительского компонента как реквизиты дочернему компоненту (в функции рендеринга):

render() { 
  return <Slidercontent employers={this.state.employers} 
} 

Таким образом, вы можете получить доступ к employers в дочернем компоненте:

{this.props.employers}