I have started a new Web App React project. I want to start easy and add a Text Box to the given react code and I don't know hot to do that. Should I create a new component and then add it to another component? Or how can I just add a simple Text Box to the given component?

import React, { Component } from 'react';

export class Home extends Component {
  displayName = Home.name

  render() {
    return (
      <div>
        <h1>Hello world! This is Itay's new Web App</h1>
        <p>Welcome to your new single-page application, built with:</p>
        <ul>
          <li><a href='/'>ASP.NET Core</a> and <a href='.aspx'>C#</a> for cross-platform server-side code</li>
          <li><a href='/'>React</a> for client-side code</li>
          <li><a href='/'>Bootstrap</a> for layout and styling</li>
        </ul>
        <p>To help you get started, we've also set up:</p>
        <ul>
          <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
          <li><strong>Development server integration</strong>. In development mode, the development server from <code>create-react-app</code> runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li>
          <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled JavaScript files.</li>
        </ul>
        <p>The <code>ClientApp</code> subdirectory is a standard React application based on the <code>create-react-app</code> template. If you open a command prompt in that directory, you can run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.</p>
      </div>
    );
  }
}

I guess I should add the new Text Box inside render()

Thanks in advance.

I have started a new Web App React project. I want to start easy and add a Text Box to the given react code and I don't know hot to do that. Should I create a new component and then add it to another component? Or how can I just add a simple Text Box to the given component?

import React, { Component } from 'react';

export class Home extends Component {
  displayName = Home.name

  render() {
    return (
      <div>
        <h1>Hello world! This is Itay's new Web App</h1>
        <p>Welcome to your new single-page application, built with:</p>
        <ul>
          <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
          <li><a href='https://facebook.github.io/react/'>React</a> for client-side code</li>
          <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
        </ul>
        <p>To help you get started, we've also set up:</p>
        <ul>
          <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
          <li><strong>Development server integration</strong>. In development mode, the development server from <code>create-react-app</code> runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li>
          <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled JavaScript files.</li>
        </ul>
        <p>The <code>ClientApp</code> subdirectory is a standard React application based on the <code>create-react-app</code> template. If you open a command prompt in that directory, you can run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.</p>
      </div>
    );
  }
}

I guess I should add the new Text Box inside render()

Thanks in advance.

• javascript
• reactjs
• web-applications

2 Answers 2

You could add the textbox inside the render or create a component and use it. The textbox would read the value from state and update the state with its current value onChange.

 render() {
     return (
        <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
         />
     );

 }

You can also use material-ui(Trending on github) for react which is one of the best UI framework for react.

you can install it by command:

npm install @material-ui/core

And then you can make textbox as below:

<TextField
  id="first-name"
  label="Name"
  value={this.state.name}
  onChange={this.handleChange('name')}
  margin="normal"
/>