I'm trying to save data on the database but it is saving each input change

import React, {useState, useEffect} from 'react'

import { NoMoralisContextProviderError } from 'react-moralis';

import './css/createpost.css'

import { useMoralis } from "react-moralis";

function CreatePost() {

    const [title, setTitle] = useState("")

    const [content, setContent] = useState("")

    const { Moralis, isInitialized } = useMoralis();

    const createNewPost = (e, title, content) => {

        e.preventDefault()

        const newPost = Moralis.Object.extend("Posts");

        const post = new newPost();

        post.set("title", title);

        post.set("content", content);

        post.save();

        return post;

    }

    return (

        <div>

            <div>

            <form action="#" className="createpost">

               <div class="data">

                  <label>Title</label>

                  <input type="text" required onChange={(e) => setTitle(e.target.value)}/>

               </div>

               <div class="data">

                  <label>Content</label>

                  <input type="text" required onChange={(e) => setContent(e.target.value)}/>

               </div>

               <div class="btn">

                  <div class="inner"></div>

                  <button type="submit" onClick={createNewPost(e, title, content)}>Submit Post</button>

               </div>

            </form>

            </div>

      </div>

    )

}

export default CreatePost

I’m trying to save the data to the database, but after each input change it is saved. So if I type “hello” it saves “h”, “he”, “hel”, “hell”, “hello” and I would like it to just save hello once. Not each input change. Can someone help me fix this issue?

Maybe this function is called multiple times. Can you add some logging to see what it is called?

but why is it called multiple times, if it only gets triggered when the button is clicked

Yes, but why would it be triggered multiple times if the button is only being clicked once and it should only be triggered when the button is clicked

I don’t know why it would happen.

maybe there is something wrong in the syntax?

Maybe that function is called on render and not on click. It can happen in vanilla js too, In that case you can use an intermediate function so that a pointer to function is set there.

yeah, it can be that, how can you make an intermediate function? I think this has happened to me before but don’t know how I solved it

Something like onclick = function () { flip(0, "heads"); };

sorry for dumb question but how would that be applied to my code?

I don’t know in react how to do that, it should be an equivalent syntax