CODEWITHSUNDEEP
javascriptreactjs
Berine
Berine

Reputation: 1

two component can display in reactjs

I have two component in the same work space in reactjs but just one is displaying

import React, { Component } from 'react';
import logo, { ReactComponent } from './logo.svg';
import './App.css';
import ReactDOM from "react-dom";
class App extends React.Component {
  render() { 
    let helloWorld = 'Welcome to good programming React';
     return ( 
      <div className="App">
         <h2> {helloWorld}</h2>
          </div>
           ); 
          }
}

ReactDOM.render(<App />, document.getElementById('root')); 
class   Form    extends React.Component {   
    constructor(props)  {       
    super(props)                
    this.state  =   {   username:   ''  }
    this.handleChange   =   this.handleChange.bind(this)
    this.handleSubmit   =   this.handleSubmit.bind(this)
  }
  handleChange(event)   {       
  this.setState({   value:  event.target.value  })  
  }
  handleSubmit(event)   {
  alert(this.state.username)
  event.preventDefault()    
  }
  render()  {   
  return    (   
  <form onSubmit={this.handleSubmit}>
        <input type="text" value={this.state.username}  onChange={this.handleChange} /> 
      <input    type="submit"   value="Submit"  />
      </form>               
      )     
    } 
  }
export default (App,Form)

output from browser gives just the form.how can i do to display both App and form

Upvotes: 0

Views: 78

Answers (5)

user12200634
user12200634

Reputation:

You are not rendering the <Form /> component. Heres the simplest solution code to solve your issue:

import React from "react";
import ReactDOM from "react-dom";
import "./App.css";

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = { username: "" };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
  handleSubmit(event) {
    alert(this.state.username);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.username}
          onChange={this.handleChange}
        />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

class App extends React.Component {
  render() {
    let helloWorld = "Welcome to good programming React";
    return (
      <div className="App">
        <h2> {helloWorld}</h2>
        <Form />
      </div>
    );
  }
}

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

export default App;

Upvotes: 0

Manav jethani
Manav jethani

Reputation: 32

ReactDOM.render function needs to have the Root component or the parent component which is to be passed as a first parameter.

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

Here App is the root component, you can include <Form /> inside of the App component to render both the components.

Upvotes: 0

Zirc
Zirc

Reputation: 470

You might not be understanding how React works, and you might be confused with this code

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

What this code essentially does is renders the App Component into the element in the index.html with the id root. The reason why your second component is not rendering is because it is not experiencing a ReactDOM.render nor is it included in the App Component.

By convention, App component should be the only component experiencing ReactDOM.render, and all the other component to be rendered must be inside the App component. Just like what @sudo97 is saying

Upvotes: 1

M Ahmed Mushtaq
M Ahmed Mushtaq

Reputation: 79

Call <Form /> inside App component and then export your App component

export default App;

Upvotes: 1

sudo97
sudo97

Reputation: 914

The problem here is that you are mounting the node <App/> but it does not contain your <Form/> component.

You just need to call <Form/> inside your <App/> component like this

class App extends React.Component {
  render() { 
    let helloWorld = 'Welcome to good programming React';
     return ( 
      <div className="App">
         <h2> {helloWorld}</h2>
         <Form/>
      </div>
     ); 
  }
}

Upvotes: 1

Related Questions