How to add code input in React.js?

We can add code input in React.js by creating a component that renders an input field and handles user input. To do this, we can use the built-in React hooks such as useState to manage the input value and handle changes. Additionally, we can also use event handlers to handle user input and update the input value accordingly. Let us first understand what ReactJS and analyze the use of React Hook “useState” as it will be used inside the code.

ReactJS

React is a JavaScript library for building user interfaces. It makes it easy to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render the right components when your data changes. You can also build encapsulated components that manage their own state, then compose them to make complex UIs.

Both small and large, complicated applications can be created with ReactJS. It offers a basic yet reliable feature set to get a web application off the ground. It is easy to master both contemporary and legacy applications and is a faster method of coding a functionality. React provides high quantity of ready-made components readily available.

UseState Hook

useState is a Hook in React that allows you to add state to functional components. It returns an array with two elements: the current state value and a function to update the state. The first time a component calls useState, it receives the initial value, and then it can use the returned function to update the state, causing the component to re-render.

Setting up the React App

Start with running the following commands −

npx create-react-app code-input
cd code-input
npm start

Approach

• Create a state variable to hold the code input −

const [code, setCode] = useState("");

• Add a textarea element to your JSX −

<textarea onChange={(e) => setCode(e.target.value)} value={code}/>

This will allow the user to type in the textarea and update the code state variable.

• To display the code input, you can use a pre or code element −

<pre>{code}</pre>

• You can also add a button to clear the code input and reset the state −

<button onclick="{()" ==""> setCode("")}>Clear

Example

Create a component CodeInput.js and paste the following code in it −

import React, { useState } from "react";
function CodeInput() {
   const [code, setCode] = useState("");
   function handleSubmit(code) {
      console.log("Submitting code: ", code);
      // Add your code submission logic here
   }
return (
   <div style = {{ background: '#555', padding: '60px 25px' }}>
      <textarea onChange={(e) => setCode(e.target.value)} value={code} />
      <pre>{code}</pre>
      <button onClick={() => setCode("")}>Clear</button>
      <button onClick={() => handleSubmit(code)}>Submit</button>
   </div>
);
}
export default CodeInput;

Now inside of the index.js import this component and use it like this −

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import CodeInput from "./CodeInput";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
   <StrictMode>
      <CodeInput />
   </StrictMode>
);

This will render a textarea where the user can input their code, a pre element that will display the code as the user types, a button to clear the code input, and a button to submit the code. When the user clicks the submit button, the handleSubmit function will be called with the code input as a parameter and the code will be logged to the console.

Output

AmitDiwan

Updated on: 06-Feb-2023

421 Views

Kickstart Your Career

Get certified by completing the course

Get Started