How to add button in textarea in react js

Hi Friends 👋,

Welcome To aHoisting!

To add button in textarea in react js, you can set position: absolute; in button. It will add button in textarea in react js.

Today, I am going to show you, how to add button in textarea in react js.

Table of contents

• Install and create a new React app.
• Import react component.
• Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component. To do this, add the following line to the top of your component file.

import React, { useState } from 'react';
import "./App.css";

Step 3: Create a Component.

you can set position: absolute; in button, and add button in textarea in react js.

<div>
  <textarea value={text} onChange={handleChange} rows={4} cols={50} />
    <button onClick={handleClick}>Submit</button>
</div>

Define the add button in textarea example.

The below code is an example of a React. You have to import React and set position: absolute; in button, to add button in textarea in react js.

App.js

import React, { useState } from 'react';
import "./App.css";

function TextAreaWithButton() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value);
  };

  const handleClick = () => {
    // Do something with the text
    console.log(text);
  };

  return (
    <div>
      <textarea value={text} onChange={handleChange} rows={4} cols={50} />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
}

export default TextAreaWithButton;

App.css

div {
  position: relative;
}

textarea {
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 0;
}

button {
  position: absolute;
  bottom: 15px;
  right: 10px;
}

In the above code example, I have used the position: absolute; css and add button in textarea in react js.

Check the output of the above code example.

All the best 👍