update text to API using ReactQuill texteditor

Viewed 11

Im trying to update my text in a reactquill texteditor. I also have a input where I can change the title, and it works fine. but when Im trying to set the Text from the text editor it never change.

Im getting the title and text from my update API and it works fine in postman so Im pretty sure its the text editor thats not working with me.

This is what I got so far:

function UpdateDoc() {
    const routing = useNavigate();
    const params = useParams();
    const [name, setName] = useState()
    const [text, setText] = useState()
    //const quill = useRef();

    useEffect(() => {
        getDocDetails();
    }, [])


    const getDocDetails = async () => {

        let res = await docModel.getOneDoc(params.id)
        setName(res.name)
        setText(res.text)

    }




    const updateDocDetails = async () => {
        let res = await docModel.updateOneDoc({ name, text }, params.id)

        console.log(res)



        routing("/show")
    }

    return (
        <div>
            <h2>Update Doc</h2>

            <>
                <div className='toolbar'>
                    <button className="button-5" type="button" onClick={updateDocDetails} >
                        Update
                    </button>
                </div>
                <div className='createcontainer'>
                    <label>Name of Document: </label>
                    <input
                        type="text"
                        placeholder="Add Name of document"
                        value={name}
                        onChange={(e) => { setName(e.target.value) }}
                        name="name"
                        className="name-text"

                    />

                    <ReactQuill
                        placeholder="Add text to document"
                        value={text}
                        theme="snow"
                        name="text"

                        //value="editor.getContents()"
                        onEditorChange={(e) => { setText(e.target.ref) }} // I FEEL LIKE IS THIS BIT THAT DOS NOT WORK FOR ME
                        //ref={quill}

                    />
                </div>

            </>
        </div >


    )
}

export default UpdateDoc
0 Answers
Related