Discussion on: Most efficient way to add to an array.

View post

Assuming you store your array in your local state, here is how I would go about it:


function YourComponent() {
  const [array, setArray] = React.useState([])

  function handleAddObject(object) {
    setArray([...array, object])
    // or setArray([object, ...array]) if you want your object at the start of the array
  }

  return (
    <div>
      {/* UI Stuff */}

      <button onClick={handleAddObject}>Add Object</button>
    </div>
  )
}

I use spread operator because 1. it avoids mutation and 2. in recent Chrome browser it seems like spread operator is more performant than other options.

cmcco91 • Jul 3 '19

Thanks for that, however I want my array to be physically changed and the new one added in. Doesn’t that mean I want mutation ?

Alex Luong • Jul 3 '19

Yes, what you're describing is mutation. Any reason why you want it like that?

cmcco91 • Jul 3 '19

Because I want to be able to go back into my array and physically see the object there if you know what I mean. So that if I need to alter one of the props I can just edit It there. Where as if I can’t physically see it in my array in my text editor I can’t. I could have it all wrong I’m only an amateur learning as best as I can. Sorry for any confusion.

Alex Luong • Jul 3 '19

I'm not entirely sure what your use case is.

Let me summarize what I think you're asking, and please correct me if I'm wrong:

You have a hard-coded array of objects in your text editor
You want to use that array to build something on your site
You want user to be able to add/edit data or that array
You want to see that edited array on your editor so you can modify it

This seems quite impossible to me. To mimic this behavior, you would need to put the array in a database of some sort, and then use it in your code + allow users to add more stuff in it.

Please do elaborate on your use case (i.e what you try to do) so that we can provide more help!

cmcco91 • Jul 3 '19 • Edited

Sort of but not exactly my use case is.

My site is front end only so what I want to be able to do is use the input fields while in npm start to add to the array.

Then before running npm run build and deploying the site. I remove the form from the render return statement so that the public cannot use it.

They will only be able to search through the arrays by their search box input.

Then if I decide I want to add more. I can go back in add the form back to the render, run npm start and add the data. Then once again remove the form. Run npm build and re deploy the site.

Think of it as a tool for Admin/maintenance to add objects to arrays more easily then typing the whole lot in the text editor.

I don’t know if it is even possible, but I don’t see why not.

Sorry I wish I could explain it better but my skill level to low so I’m just causing confusion.

Alex Luong • Jul 8 '19

Hey there,

Sorry for the late response. Quite a long July 4th weekend for me.

I get what you want to do now. So let's assume you have a file callded data.json with your array in it. What I would do is:

Create an API server (using Node/Python, Java, etc) that can read + write data to your computer
When you change data in your admin/maintenance tool, in your React front end, you will send an AJAX request to update that data
Your API server will then write the new data to your disk

That's quite a process. Is there a problem with editing data from the JSON file itself?

cmcco91 • Jul 8 '19

After further investigation I have discovered that what I’m asking is basically impossible or not right either way. And so now I think I do need to be looking at using json and passing that data into my array. So now the question is the best way for updating and adding to a json file. I’m thinking for now I’m best to just use. Json generator app/page and just copy and paste it in. But I would like to have a form where new listings can fill out their information and submit it and the form send me the output via email in json form. That way I can review it and then add it to the correct json file.

What are your thought on this new idea? Thanks for your time.

Alex Luong • Jul 8 '19

I'm not sure why you need a UI to add data to JSON. What's wrong with edit the array inside your text editor?

cmcco91 • Jul 8 '19

That’s what I’m going to do for now mate, but I’m talking about thousands of new objects being added. I just thought there has to be a more simplified and faster way of going about it. I appreciate your help.