simplest approach of dynamically adding components in react





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















currently working on react. I have two components lets say ad and home . Inside home components i have one image and on click event of that image i want to render ad inside home component below image. Is there any simples method . thank you!










share|improve this question























  • Maintain an isOpen state in Home component. Toggle it on click of image and based on this state render the AD conditionally

    – Shubham Khatri
    Jan 3 at 12:59


















0















currently working on react. I have two components lets say ad and home . Inside home components i have one image and on click event of that image i want to render ad inside home component below image. Is there any simples method . thank you!










share|improve this question























  • Maintain an isOpen state in Home component. Toggle it on click of image and based on this state render the AD conditionally

    – Shubham Khatri
    Jan 3 at 12:59














0












0








0








currently working on react. I have two components lets say ad and home . Inside home components i have one image and on click event of that image i want to render ad inside home component below image. Is there any simples method . thank you!










share|improve this question














currently working on react. I have two components lets say ad and home . Inside home components i have one image and on click event of that image i want to render ad inside home component below image. Is there any simples method . thank you!







reactjs react-component






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Jan 3 at 12:52









AKSHAY SALEKARAKSHAY SALEKAR

102




102













  • Maintain an isOpen state in Home component. Toggle it on click of image and based on this state render the AD conditionally

    – Shubham Khatri
    Jan 3 at 12:59



















  • Maintain an isOpen state in Home component. Toggle it on click of image and based on this state render the AD conditionally

    – Shubham Khatri
    Jan 3 at 12:59

















Maintain an isOpen state in Home component. Toggle it on click of image and based on this state render the AD conditionally

– Shubham Khatri
Jan 3 at 12:59





Maintain an isOpen state in Home component. Toggle it on click of image and based on this state render the AD conditionally

– Shubham Khatri
Jan 3 at 12:59












3 Answers
3






active

oldest

votes


















0














check this. i think this is what you want



//dynamically generate div 
let DynamicDiv=()=>{
return (<div>
<p>i am here</p>
</div>)
}

class App extends Component {
constructor(props){
super(props)
this.state={
visible:false //visibility of Component
}

this.divVisiblity=this.divVisiblity.bind(this) //function is bind when user clicks on pic
}
divVisiblity(){
//this function will get called when user clicks on function
this.setState(()=>{return {visible:!this.state.visible}}) //changes visible state of Component when user clicks

}
render() {
return (
<div>
<div className="App">
{/* onClick is assigned function named divVisiblity */}
<img onClick={this.divVisiblity} src="https://placekitten.com/g/200/300" alt="test"/>
{/*this is ternary if else statement in js */}
{/* if visible = true ,display Component else dont */}
<div>
{this.state.visible && <DynamicDiv/>}
</div>
);
}
}





share|improve this answer































    0














    I think that will help to you.

    export default class HomeComponent extends Component<Props> {
    constructor(props) {
    super(props);
    this.state = {
    renderAdComponent: false
    };
    this.onClickHandler = this.onClickHandler.bind(this);
    }

    onClickHandler() {
    this.setState({renderAdComponent: !this.state.renderAdComponent})
    }

    render() {
    return (
    <View>
    <Image onClick={this.onClickHandler}/>
    {this.state.renderAdComponent ? <AdComponent/> : null}
    </View>
    );
    }
    }





    share|improve this answer































      0














      What @sdkcy suggested is okay but the ternary operator isn't really needed. You can do the following



      { this.state.isAdShown && <ComponentToShow /> }



      This gets rid of the useless : null result.






      share|improve this answer
























        Your Answer






        StackExchange.ifUsing("editor", function () {
        StackExchange.using("externalEditor", function () {
        StackExchange.using("snippets", function () {
        StackExchange.snippets.init();
        });
        });
        }, "code-snippets");

        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "1"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });














        draft saved

        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54022701%2fsimplest-approach-of-dynamically-adding-components-in-react%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        3 Answers
        3






        active

        oldest

        votes








        3 Answers
        3






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        0














        check this. i think this is what you want



        //dynamically generate div 
        let DynamicDiv=()=>{
        return (<div>
        <p>i am here</p>
        </div>)
        }

        class App extends Component {
        constructor(props){
        super(props)
        this.state={
        visible:false //visibility of Component
        }

        this.divVisiblity=this.divVisiblity.bind(this) //function is bind when user clicks on pic
        }
        divVisiblity(){
        //this function will get called when user clicks on function
        this.setState(()=>{return {visible:!this.state.visible}}) //changes visible state of Component when user clicks

        }
        render() {
        return (
        <div>
        <div className="App">
        {/* onClick is assigned function named divVisiblity */}
        <img onClick={this.divVisiblity} src="https://placekitten.com/g/200/300" alt="test"/>
        {/*this is ternary if else statement in js */}
        {/* if visible = true ,display Component else dont */}
        <div>
        {this.state.visible && <DynamicDiv/>}
        </div>
        );
        }
        }





        share|improve this answer




























          0














          check this. i think this is what you want



          //dynamically generate div 
          let DynamicDiv=()=>{
          return (<div>
          <p>i am here</p>
          </div>)
          }

          class App extends Component {
          constructor(props){
          super(props)
          this.state={
          visible:false //visibility of Component
          }

          this.divVisiblity=this.divVisiblity.bind(this) //function is bind when user clicks on pic
          }
          divVisiblity(){
          //this function will get called when user clicks on function
          this.setState(()=>{return {visible:!this.state.visible}}) //changes visible state of Component when user clicks

          }
          render() {
          return (
          <div>
          <div className="App">
          {/* onClick is assigned function named divVisiblity */}
          <img onClick={this.divVisiblity} src="https://placekitten.com/g/200/300" alt="test"/>
          {/*this is ternary if else statement in js */}
          {/* if visible = true ,display Component else dont */}
          <div>
          {this.state.visible && <DynamicDiv/>}
          </div>
          );
          }
          }





          share|improve this answer


























            0












            0








            0







            check this. i think this is what you want



            //dynamically generate div 
            let DynamicDiv=()=>{
            return (<div>
            <p>i am here</p>
            </div>)
            }

            class App extends Component {
            constructor(props){
            super(props)
            this.state={
            visible:false //visibility of Component
            }

            this.divVisiblity=this.divVisiblity.bind(this) //function is bind when user clicks on pic
            }
            divVisiblity(){
            //this function will get called when user clicks on function
            this.setState(()=>{return {visible:!this.state.visible}}) //changes visible state of Component when user clicks

            }
            render() {
            return (
            <div>
            <div className="App">
            {/* onClick is assigned function named divVisiblity */}
            <img onClick={this.divVisiblity} src="https://placekitten.com/g/200/300" alt="test"/>
            {/*this is ternary if else statement in js */}
            {/* if visible = true ,display Component else dont */}
            <div>
            {this.state.visible && <DynamicDiv/>}
            </div>
            );
            }
            }





            share|improve this answer













            check this. i think this is what you want



            //dynamically generate div 
            let DynamicDiv=()=>{
            return (<div>
            <p>i am here</p>
            </div>)
            }

            class App extends Component {
            constructor(props){
            super(props)
            this.state={
            visible:false //visibility of Component
            }

            this.divVisiblity=this.divVisiblity.bind(this) //function is bind when user clicks on pic
            }
            divVisiblity(){
            //this function will get called when user clicks on function
            this.setState(()=>{return {visible:!this.state.visible}}) //changes visible state of Component when user clicks

            }
            render() {
            return (
            <div>
            <div className="App">
            {/* onClick is assigned function named divVisiblity */}
            <img onClick={this.divVisiblity} src="https://placekitten.com/g/200/300" alt="test"/>
            {/*this is ternary if else statement in js */}
            {/* if visible = true ,display Component else dont */}
            <div>
            {this.state.visible && <DynamicDiv/>}
            </div>
            );
            }
            }






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Jan 3 at 19:01









            Rahul SawantRahul Sawant

            2215




            2215

























                0














                I think that will help to you.

                export default class HomeComponent extends Component<Props> {
                constructor(props) {
                super(props);
                this.state = {
                renderAdComponent: false
                };
                this.onClickHandler = this.onClickHandler.bind(this);
                }

                onClickHandler() {
                this.setState({renderAdComponent: !this.state.renderAdComponent})
                }

                render() {
                return (
                <View>
                <Image onClick={this.onClickHandler}/>
                {this.state.renderAdComponent ? <AdComponent/> : null}
                </View>
                );
                }
                }





                share|improve this answer




























                  0














                  I think that will help to you.

                  export default class HomeComponent extends Component<Props> {
                  constructor(props) {
                  super(props);
                  this.state = {
                  renderAdComponent: false
                  };
                  this.onClickHandler = this.onClickHandler.bind(this);
                  }

                  onClickHandler() {
                  this.setState({renderAdComponent: !this.state.renderAdComponent})
                  }

                  render() {
                  return (
                  <View>
                  <Image onClick={this.onClickHandler}/>
                  {this.state.renderAdComponent ? <AdComponent/> : null}
                  </View>
                  );
                  }
                  }





                  share|improve this answer


























                    0












                    0








                    0







                    I think that will help to you.

                    export default class HomeComponent extends Component<Props> {
                    constructor(props) {
                    super(props);
                    this.state = {
                    renderAdComponent: false
                    };
                    this.onClickHandler = this.onClickHandler.bind(this);
                    }

                    onClickHandler() {
                    this.setState({renderAdComponent: !this.state.renderAdComponent})
                    }

                    render() {
                    return (
                    <View>
                    <Image onClick={this.onClickHandler}/>
                    {this.state.renderAdComponent ? <AdComponent/> : null}
                    </View>
                    );
                    }
                    }





                    share|improve this answer













                    I think that will help to you.

                    export default class HomeComponent extends Component<Props> {
                    constructor(props) {
                    super(props);
                    this.state = {
                    renderAdComponent: false
                    };
                    this.onClickHandler = this.onClickHandler.bind(this);
                    }

                    onClickHandler() {
                    this.setState({renderAdComponent: !this.state.renderAdComponent})
                    }

                    render() {
                    return (
                    <View>
                    <Image onClick={this.onClickHandler}/>
                    {this.state.renderAdComponent ? <AdComponent/> : null}
                    </View>
                    );
                    }
                    }






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Jan 3 at 13:10









                    sdkcysdkcy

                    1,421612




                    1,421612























                        0














                        What @sdkcy suggested is okay but the ternary operator isn't really needed. You can do the following



                        { this.state.isAdShown && <ComponentToShow /> }



                        This gets rid of the useless : null result.






                        share|improve this answer




























                          0














                          What @sdkcy suggested is okay but the ternary operator isn't really needed. You can do the following



                          { this.state.isAdShown && <ComponentToShow /> }



                          This gets rid of the useless : null result.






                          share|improve this answer


























                            0












                            0








                            0







                            What @sdkcy suggested is okay but the ternary operator isn't really needed. You can do the following



                            { this.state.isAdShown && <ComponentToShow /> }



                            This gets rid of the useless : null result.






                            share|improve this answer













                            What @sdkcy suggested is okay but the ternary operator isn't really needed. You can do the following



                            { this.state.isAdShown && <ComponentToShow /> }



                            This gets rid of the useless : null result.







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Jan 3 at 14:10









                            Bojan IvanacBojan Ivanac

                            795516




                            795516






























                                draft saved

                                draft discarded




















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54022701%2fsimplest-approach-of-dynamically-adding-components-in-react%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                Popular posts from this blog

                                android studio warns about leanback feature tag usage required on manifest while using Unity exported app?

                                SQL update select statement

                                WPF add header to Image with URL pettitions [duplicate]