Call a React component inside a function, when a button is clicked

Question

The Container component is not getting rendered. Can anyone guide me why I'm not able to render the Container component?

App.js

import React, { Component } from "react";
import "./App.css";
import Container from "./Container";

class App extends Component {
  add() {
    return <Container />;
  }
  render() {
    return (
      <div className="App">
        <button onClick={() => this.add()}>CLICK</button>
      </div>
    );
  }
}

export default App;

Container.js

import React, { Component } from "react";

export default class Container extends Component {
 render() {
   return <h1>hello</h1>;
  }
}

Possible duplicate of [onClick doesn't render new react component.](https://stackoverflow.com/questions/33840150/onclick-doesnt-render-new-react-component) — , Jul 03 '18 at 13:21
Recommend you to first read thru [React Docs](https://reactjs.org/docs/rendering-elements.html) — froston, Jul 03 '18 at 13:31

score 4 · Answer 1 · answered Jul 03 '18 at 13:17

You can set a state and render the component on button click

import React, { Component } from "react";
 import "./App.css";
 import Container from "./Container";

 class App extends Component {
  state = {
     addContainer: []
  }
  add() {
     this.setState(prevState => {addContainer: prevstate.addContainer.concat([0])})
  }
 render() {
  return (
   <div className="App">
     {this.state.addContainer.map(() => {
         return <Container />
     })}
     <button onClick={() => this.add()}>CLICK</button>
   </div>
  );
 }
}

export default App;

or if its just a single container whose visibility you want to toggle on button click

 import React, { Component } from "react";
 import "./App.css";
 import Container from "./Container";

 class App extends Component {
  state = {
     addContainer: false
  }
  add() {
     this.setState(prevState => {addContainer: !prevstate.addContainer)})
  }
 render() {
  return (
   <div className="App">
     {this.state.addContainer &&  <Container />}
     <button onClick={() => this.add()}>CLICK</button>
   </div>
  );
 }
}

export default App;

your solution is not solved my problem, I want to call component inside a function. @Shubham Khatri — srinivas, Jul 03 '18 at 13:22
what do you mean by calling the component? From what I understand its simply rendering it which is possible withthe above methods — Shubham Khatri, Jul 03 '18 at 15:33

score 3 · Answer 2 · answered Jul 03 '18 at 13:22

Your function isn't rendering because the return of your method add() isn't inside your render() method. It's inside the onClick(), so it won't render. Try like the snippet bellow:

class Container extends React.Component {
    render(){
      return <h1> Hello World </h1>
    }
}

class App extends React.Component {
  state= { render: false }
  add = () => {
    this.setState({render : !this.state.render})
  }
 render() {
  return (
   <div className="App">
     <button onClick={() => this.add()}>CLICK</button>
     { this.state.render &&
        <Container/>
     }
   </div>
  );
 }
}

ReactDOM.render(<App/>,document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

You can even toggle the <Container> rendering, as I did above, but you can't return a Component inside a onClick and expect that it'll be rendered.

score 0 · Answer 3 · answered Apr 07 '19 at 04:38

0

Just change this.state in the function where you want to render a component. this.setState({ addContainer: true }) Render all the components normally in the render() function and when the state changes, your component will automatically get rendered.

answered Apr 07 '19 at 04:38

Akshata Dabade

477
5
10

Call a React component inside a function, when a button is clicked

3 Answers3