How to append a component in a reactjs

Question

I want to append Interviewee name text box to be appended on click of add new button, I have tried but the button is also appended and my need is only Interviewee name text box should be duplicated. Like on button click it should look like .........................................................................................................

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>    
    <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>    
    <style>
        table,th,td
        {
            border: 1px solid #000;
        }
        th,td
        {
            width:220px;
        }
        table
        {
            border-collapse: collapse;
            margin: auto;           
        }
        .error
        {
            color: red;
        }   
    </style>
  </head>
  <body>
    <div id="InterviewerSection"></div>
    <div id="candidateSection"></div>
    <div id="buttonSection"></div>

    <script type="text/jsx">  
        var count=0;
        class Interviewer extends React.Component{
            render(){
                return(
                    <div>
                        <table>
                            <tr>
                                <th colSpan="2">Interviewer details</th>
                            </tr>
                            <tr>
                                <th>Name</th> <td><input type="text" placeholder="Interviewer name" /></td>
                            </tr>   
                        </table>
                    </div>              
                )           
            }

        }
        class Buttons extends React.Component{
            render(){
                return(
                    <table>
                        <tr>
                            <td><button onClick={this.props.validate} ref="input">Add new</button></td>
                            <td><button>Save</button></td>                          
                        </tr>   
                    </table>
                )
            }

        }
        class Interviewee extends React.Component {             
            constructor(props) {
                super(props);
                this.state = {
                    showComponent: false,                    
                };               
            }
            addNew(){
                this.setState({
                    showComponent: true
                });
            }
            validate(){
                this.setState({
                    showComponent: true
                });
            }
            render(){
                return(
                    <div>
                        <table>

                            <tr>
                                <th colSpan="2">Interviewee details</th>
                            </tr>
                            <tr>
                                <th>Name</th>
                                <td><input type="text" placeholder="Interviewee name" /></td>                               
                            </tr>                           
                        </table>
                        {this.state.showComponent?<MyComponent />:null}     
                    </div>

                );

            }

        }    
        ReactDOM.render(<Interviewer />,document.getElementById("InterviewerSection"));
        ReactDOM.render(<Interviewee />,document.getElementById("candidateSection"));
        ReactDOM.render(<Buttons />,document.getElementById("buttonSection"))   
</script>
  </body>
</html>

Dat Pham · Accepted Answer · 2017-10-21 04:37:57Z

Through your code, I thought you misunderstand the reason for using Reactjs and use it in a jQuery-like kind of way. With React, we should use the components in a hierarchy and composable structure. For example, in your application, we can have a root component that contains other components: Interviewer, Interviewee, AddButton, SaveButton, etc. Something similar to this:

<App>
    <Interviewer interviewer />
    <Interviewees intervieweeList />
    <ButtonPanel onAddNew onSave />
</App>

The root component (App) has its state as the centralized data store providing other components with the necessary data (intervieweeList for Interviewees and so on) as well as passing app methods to the ButtonPanel. In the example above, the onAddNew could manipulate the App state by adding a new entry to the intervieweeList and then trigger the Interviewees component to re-render. By doing this, you only have to mount (ReactDOM.render) the App component and it will take care of the rest.

It's a whole different way to implement the app logic compared to jQuery so my advice is first trying to wrap your head around how React work and start from there.

anand · Accepted Answer · 2017-10-21 08:37:33Z

As pointed out by @dat-pham, you need to learn the "React" way of thinking.

You need to have a single root node, which is named <App /> by convention. All your other components are nested inside.

You compose components using nested sub-components. In your case, <Table> is inside <App>. <Table> contains children <Interviewer/> etc.

Hope the following code is helpful...

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
  <style>
    table,th,td {
      border: 1px solid #000;
    }
    th,td {
      width:220px;
    }
    table {
      border-collapse: collapse;
      margin: auto;
    }
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <div id="root"></div>

  <script type="text/jsx">
    class App extends React.Component {
      render(){
        return (
          <Table />
        );
      }
    }

    class Table extends React.Component {

      constructor(props) {
        super(props);
        this.state = {count: 1};
        this.addInterviewee = this.addInterviewee.bind(this);
      }

      getInterviewees(){
        var interviewees = [];
        for (let i=0; i<this.state.count; i++){
          interviewees.push(<Interviewee key={i}/>)
        }
        return interviewees;
      }

      addInterviewee() {
        var oldCount = this.state.count;
        this.setState({count: oldCount+1});
      }

      render() {
        return (
          <table>
            <thead>
              <tr>
                <th colSpan="2">Interviewer details</th>
              </tr>
            </thead>
            <tbody>
              <Interviewer />
              <tr>
                <td colSpan="2" style={{"textAlign": "center"}}><b>Interviewee details</b></td>
              </tr>
              {this.getInterviewees()}
              <Buttons addInterviewee={this.addInterviewee} />
            </tbody>
          </table>
        );
      }
    }

    class Interviewer extends React.Component{
      render(){
        return(
          <tr>
            <td> <b>Name</b> </td>
            <td> <input type="text" placeholder="Interviewer name" /> </td>
          </tr>
        )
      }
    }

    class Interviewee extends React.Component {
      render(){
        return(
          <tr>
            <td><b>Name</b></td>
            <td><input type="text" placeholder="Interviewee name" /></td>
          </tr>
        );
      }
    }

    class Buttons extends React.Component{
      render(){
        return(
          <tr>
            <td><button onClick={this.props.addInterviewee}>Add new</button></td>
            <td><button>Save</button></td>
          </tr>
        )
      }

    }

    ReactDOM.render(<App />,document.getElementById("root"));
  </script>
</body>
</html>

Elumalai Kaliyaperumal · Accepted Answer · 2017-10-21 08:09:34Z

I am assuming Interviewee component is your main component. So remaining component will be placed inside Interviewee component.

Better to maintain one root for an application..

Based on your requirement I have created something like below, hope this will helps you..

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>    
    <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>    
    <style>
        table,th,td
        {
            border: 1px solid #000;
        }
        th,td
        {
            width:220px;
        }
        table
        {
            border-collapse: collapse;
            margin: auto;           
        }
        .error
        {
            color: red;
        }   
    </style>
  </head>
  <body>
    <div id="app"></div>

    <script type="text/jsx">  
        var count=0;

        class Interviewer extends React.Component{
            render(){
                return(
                    <div>
                        <table>
                            <thead>
                                <tr>
                                    <th colSpan="2">Interviewer details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Name</th>
                                    <td><input type="text" placeholder="Interviewer name" /></td>
                                </tr>
                            </tbody>  
                        </table>
                    </div>              
                )           
            }
        }

        class Buttons extends React.Component{
            render(){
                return(
                <div>
                    <table>
                        <tbody>
                            <tr>
                                <td><button onClick={this.props.validate} ref="input">Add new</button></td>
                                <td><button>Save</button></td>                          
                            </tr>   
                        </tbody>
                    </table>
                </div>
                )
            }
        }

        class Interviewee extends React.Component {             
            constructor(props) {
                super(props);
                this.state = {
                    showComponent: false, 
                    itemArray: []                   
                };               
            }

            addNew(){
                this.validate()
            }

            validate(){
                const item = this.state.itemArray;
                item.push(
                   <IntervieweeDetail />   
                )
                this.setState({itemArray: item, showComponent: true})
            }
            render(){
                return(
                    <div>
                        <Interviewer />
                        <table>
                            <tbody>
                                <tr>
                                    <th colSpan="2">Interviewee details</th>
                                </tr>
                                <IntervieweeDetail /> 
                                {this.state.showComponent ? this.state.itemArray : null}     
                            </tbody>
                        </table>
                        <Buttons validate={this.validate.bind(this)}/> 
                    </div>

                );
            }
        } 

        const IntervieweeDetail = (props) => (
            <tr>
                <th>Name</th>
                <td><input type="text" placeholder="Interviewee name" /></td>                               
            </tr> 
        )

        ReactDOM.render(<Interviewee />, document.getElementById("app"));
</script>
  </body>
</html>

Collectives™ on Stack Overflow

How to append a component in a reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related