CODEWITHSUNDEEP
reactjscomponents
Stevan Tosic
Stevan Tosic

Reputation: 7199

Add new Component on componentDidMount in ReactJs

I need to calculate the width of the component before rendering child component.

But, problem is that I need to render components first to be able to get width which is needed for child component.

In other words, I need to prepend child component after render is finished in main component.

I guess that componetnDidMount() is best for do that.

this is code example

/**
 * @returns void
 */
componentDidMount()
{
    let width = this.seatMap.offsetWidth;
    // I want to add component here
    <LeafletMap width={width}/>
}

/**
 * @returns {XML}
 */
render() {
    return (
        <div className="SeatMap" ref={seatMap => { this.seatMap = seatMap } }>
            // This is way how it is work at this moment
            <LeafletMap />
            </div>
    );
}

Upvotes: 2

Views: 2814

Answers (2)

Kartal Erkoc
Kartal Erkoc

Reputation: 290

First, add state variables in your constructor. One for checking if LeafletMap is ready to be rendered, and other for width of LeafletMap to be passed as prop:

constructor(props) {
    super(props);
    this.state = {
        widthLeafletMap: null
        displayLeafletMap: false
    };
}

Then, in your componentDidMount method, update both of these state variables to re-render the parent component as you now know the width for LeafletMap and it is ready to be displayed:

componentDidMount()
{
    let width = this.seatMap.offsetWidth;
    this.setState({
        widthLeafletMap: width,
        displayLeafletMap: true
    });
}

Finally, update your render() method to display LeafletMap component when it is ready to be displayed with the desired width (if only displayLeafletMap is true, it will display it with desired width):

render() {
    let displayLeafletMap = this.state.displayLeafletMap;
    let widthLeafletMap = this.state.widthLeafletMap;
    return (
        <div className="SeatMap" ref={seatMap => { this.seatMap = seatMap } }>
            {displayLeafletMap && (
                <div className="row">
                    <LeafletMap width={widthLeafletMap} />
                </div>
            )}
        </div>
    );
}

Upvotes: 3

toufek khoury
toufek khoury

Reputation: 3374

we can set the state in componentDidMount and check the state in the render so only when the component did mount and the state is set so you can return , something like: 

/**
 * @returns void
 */
... define state in constructor ...

componentDidMount()
{
    let width = this.seatMap.offsetWidth;
    // set state here
    this.setState({seatMapWidth: width});
}

/**
 * @returns {XML}
 */
render() {
//add condition here to control your return 
  const {seatMapWidth} = this.state;
  if(seatMapWidth !== null){
   // if this state is not null so return your component
     return <LeafletMap width={seatMapWidth}/> 
}
   return (
        <div className="SeatMap" ref={seatMap => { this.seatMap = seatMap } }>
            // This is way how it is work at this moment
            <LeafletMap />
            </div>
    );
}

Upvotes: 1

Related Questions