Copy Text button function in React JS

Question

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')

Answer 1

There are some problems in your code:

1. You have created a state for text and don't need to get it by getElementById and Select.
2. writetext doesn't exist in navigator.clipboard. It should be writeText (it's case-sensitive).
3. For using a state in the whole component, it needs to define state at the top of the component. So, move const [text, setText] = useState(''); to the top of your component.
4. The 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>
    </>
  )
}