React Bootstrap Textarea with Set Value in State Example

React Bootstrap Textarea with Set Value in State Example

React-bootstrap textarea value example; In this tutorial, you will learn how to use bootstrap textarea with set value in state with react js apps.

React Bootstrap textarea is an input dedicated for a large volume of text. It may be used in a variety of components like forms, comment sections and forums. Textareas don’t have to be boring. They can be enhanced with colors, shadows or rounded corners.

React-bootstrap has some attributes like height width. Textarea is by default autosize; But you can set minimum height and width of textarea in react using react-bootstrap.

Now in this how to use react -bootstrap textarea with value in react tutorial will provide you step by step guide on how to integrate bootstrap textarea in react js app with the bootstrap 4 library.

How to use React Bootstrap Textarea with Value

  • Step 1 – Create React App
  • Step 2 – Install React Bootstrap
  • Step 3 – Create TextArea Component
  • Step 4 – Improt TextArea Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app my-react-app

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install React Bootstrap

In this step, execute the following command to install react boostrap library into your react app:

npm install bootstrap --save

npm install react-bootstrap bootstrap

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>How to refresh a Page in React</h2>
    </div>
  );
}

export default App;

Step 3 – Create TextArea Component

In this step, create BootstrapTextarea.js file. So, visit the src directory of your react js app and create a simple form component file named BootstrapTextarea.js. And add the following code into it:

import React from 'react'
import Form from 'react-bootstrap/Form'

class BootstrapTextarea extends React.Component{

    constructor(){
        super();
        this.state = {
            address:null
        }

        this.handleInputChange = this.handleInputChange.bind(this);
    }

    handleInputChange(event) {
        this.setState({
            address: event.target.value
        });

        console.warn(this.state)
    }

    render(){
        return(
            <div>
                <Form>
                    <Form.Group controlId="exampleForm.ControlTextarea1">
                        <Form.Label>Example textarea</Form.Label>
                        <Form.Control as="textarea" rows="3" name="address" onChange={this.handleInputChange} />
                    </Form.Group>
                </Form>
            </div>
        )  
    }
}

export default BootstrapTextarea;

Step 4 – Import TextArea Component in App.js

In this step, you need to add BootstrapTextarea.js file in src/App.js file:

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import BootstrapTextarea from './BootstrapTextarea'

function App() {  
    
  return (  
    <div className="App">  
      <BootstrapTextarea />  
    </div>  
  );  
}  

export default App;

Conclusion

React-bootstrap textarea value example; In this tutorial, you have learn how to use bootstrap textarea with set value in state with react js apps.

Recommended React JS Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *