How to modify data dynamically using react?

Moralis General
#1

I have tried to modify data statically using this code:-

const upDateMonster = async() => {
    const MonsterCreature = Moralis.Object.extend('Monsters');
    const query = new Moralis.Query(MonsterCreature);
    query.equalTo("x", 4);  
    const monster = await query.first();
    monster.set("x", 1337);
    monster.save();
    console.log(monster);
    return monster;
 }

And It worked fine but needs to add data dynamically.
However, I’m creating a crud app using the react+moralis database so I want to edit data dynamically using form hence any help, please!
Thank you :slight_smile:

#2

You can also check here how to format code on forum:

For you to add data dynamically, you can simply pass some params to your function and use the params in your query.

#3

I have already added data dynamically to the database but I want to edit that data.

#4

What type of edit do you want to. You can depend on the function parameters to do that really.

const upDateMonster = async(queryValue, newValue) => {
    const MonsterCreature = Moralis.Object.extend('Monsters');
    const query = new Moralis.Query(MonsterCreature);
    query.equalTo("x", queryValue);  
    const monster = await query.first();
    monster.set("x", newValue);
    monster.save();
    console.log(monster);
    return monster;
 }

Here’s a sample

#5

I’m creating a CRUD app so see, I added name, email, and contact using the form and displayed that data to the dom so now what I want is, whenever I click on the edit button then I should be able to update that user data using a form and that updated data should be store in moralis database again
for instance:- https://www.loom.com/share/a59db8f147e0407a94abf1a0008f68e6

#6

Best if you use https://github.com/MoralisWeb3/react-moralis

If you’re editing User data something like this should work:

setUserData({
        username: "Batman",
        email: "[email protected]",
        numberOfCats: 12,
      })}

See more examples in the above repo.

#7

Yes, we can use this if our data is stored in the _User object right? but I created a new class for these data.

#8

Yes it can be done for any. Objects - Moralis

#9

Okay, thank you everyone for your time. :slightly_smiling_face:

#10

I would like to share that, I soved that issue by this code:-

 useEffect(() => {
      const EditData = async () => {

      const ContactFormModal = Moralis.Object.extend("contactFormModal");

      const query = new Moralis.Query(ContactFormModal);
      query.equalTo("objectId", id);
      const object = await query.first();
      console.log(object)

      if(id){

        formik.setValues({

          name: object && object.attributes.name,
          
          email: object && object.attributes.email,
          
          contact: object && object.attributes.contact,
          
          });
      } else {
        formik.setValues({
          name:'',
          email:'',
          contact:''
        })

        }  

    }
    EditData()

    


  }, [])

 if(id){
              const ContactFormModal = Moralis.Object.extend("contactFormModal");

              const query = new Moralis.Query(ContactFormModal);
              
              console.log(query);
              
              query.equalTo("objectId", id);
              
              const object = await query.first();
              
              object.set("name", formData.name);
              
              object.set("email", formData.email);
              
              object.set("contact", formData.contact);
              
              object.save();
            }else{
              contactDet.set("name", formData.name);
              contactDet.set("email", formData.email);
              contactDet.set("contact", formData.contact);
      
               contactDet.save();
            }
2 Likes