- Forums
- react
- React useState Usage For JSX Forms OnChange
This Page Contains information about React useState Usage For JSX Forms OnChange By dd in category react with 0 Replies. [5104], Last Updated: Mon Jun 24, 2024
dd
Wed Mar 22, 2023
0 Comments
283 Visits
This is how you would implement useState in React:
Import, Initiate Variable and use in JSX:
Import:
import {useState} from "react";
Declare:
const [mywords, setMywords] = useState('');
Usage:
<label htmlFor="exampleFormControlTextarea1" className="form-label">Enter Words Paragraphs or Lists:</label>
<textarea className="form-control" id="exampleFormControlTextarea1"
rows="3"
placeholder={`Explains what this is`}
value={mywords}
onChange={e => setMywords(e.target.value)}
></textarea>
Results:
Example Component:
import React from 'react';
import { useState } from 'react'
function form() {
const [mywords, setMywords] = useState('');
return (
<div className="container">
<div className="mb-3">
<label htmlFor="exampleFormControlTextarea1" className="form-label">Enter Words Paragraphs or Lists:</label>
<textarea className="form-control" id="exampleFormControlTextarea1"
rows="3"
placeholder={`Explains what this is`}
value={mywords}
onChange={e => setMywords(e.target.value)}
></textarea>
<p>words:{mywords}</p>
</div>
</div>
)
}
export default form