javascriptreactjs

Copy Text button function in React JS


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

Solution

  • 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>
        </>
      )
    }
    

    Edit eloquent-gauss-turvqo