I am working on project create-react-app create a some function in this project but copytext function not working issues mention in the below line of code. please check the issue...
import React, {useState} from 'react'
export default function TextForm(props) {
const handleCopy = () => {
console.log("I am copy");
let text = document.getElementById("mybox");
text.Select();
navigator.clipborad.writetext(text.value);
}
const handleOnChange = (event) =>{
// console.log("on change");
setText(event.target.value);
}
const [text, setText] = useState('');
return (
<>
<div className='container'>
<h1>{props.heading} </h1>
<div className="mb-3">
<textarea className="form-control"
value={text} id="myBox" rows="8" onChange={handleOnChange}></textarea>
<button className="btn btn-primary mx-2 my-2" onClick={handleCopy}>Copy Text</button>
</div>
</div>
<div className="container my-3">
<h2>Your text summary</h2>
<p>{text.split(" ").length} Word and {text.length} Characters</p>
<p>{0.008 * text.split(" ").length} Minute Read</p>
<h3>Preview</h3>
<p>{text}</p>
</div>
</>
)
}
TextForm.js:16
Uncaught TypeError: Cannot read properties of null (reading 'Select')
There are some problems in your code:
text
and don't need to get it by getElementById
and Select
.writetext
doesn't exist in navigator.clipboard
. It should be writeText
(it's case-sensitive).state
at the top of the component. So, move const [text, setText] = useState('');
to the top of your component.text
state doesn't have a value
property. You can access its value just by text
.Here's the edited code:
function TextForm(props) {
const [text, setText] = useState('');
const handleCopy = () => {
navigator.clipboard.writeText(text);
}
const handleOnChange = (event) =>{
setText(event.target.value);
}
return (
<>
<div className='container'>
<h1>{props.heading} </h1>
<div className="mb-3">
<textarea className="form-control"
value={text} id="myBox" rows="8" onChange={handleOnChange}></textarea>
<button className="btn btn-primary mx-2 my-2" onClick={handleCopy}>Copy Text</button>
</div>
</div>
<div className="container my-3">
<h2>Your text summary</h2>
<p>{text.split(" ").length} Word and {text.length} Characters</p>
<p>{0.008 * text.split(" ").length} Minute Read</p>
<h3>Preview</h3>
<p>{text}</p>
</div>
</>
)
}