How do I update the array by removing any object and submit the array?

1 
function UpdateSupplierDeliveryAreas({ match, updateSupplierDeliveryAreas }) {
  const formArray = [{ id: 0 }]

  const setFormArray = []

  const [stateFormArray, setStateFormArray] = useState(formArray)

  useEffect(() => {
    async function fetchData() {
      const res = await axios
        .get(
          `host/${match.params.id}`
        )
        .then(res => {
          const setFormArray = res.data
          //console.log(setFormArray)
          setStateFormArray(setFormArray)
        })
    }
    fetchData()
  }, [match.params.id])

  let newStateFormArray = stateFormArray

  const removeByAttr = (newStateFormArray, attr, value) => {
    //console.log(attr, value)
    //e.preventDefault()
    let i = newStateFormArray.length
    while (i--) {
      if (
        newStateFormArray[i] &&
        newStateFormArray[i].hasOwnProperty(attr) &&
        arguments.length > 2 &&
        newStateFormArray[i][attr] === value
      ) {
        newStateFormArray.splice(i, 1)
      }
    }
  }
  console.log(removeByAttr())

  return (
    <Fragment>
      <Container fluid="true">
        <Grid>
          <Grid.Row>
            <Grid.Column>
              {stateFormArray.map(area => (
                <>
                  <p value={area.id} key={area.id}>
                    {area.name}
                  </p>
                  <button
                    onClick={removeByAttr(newStateFormArray, "name", area.name)}
                  >
                    Delete
                  </button>
                </>
              ))}
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Container>
    </Fragment>
  )
}
2

You filter it, that’s by far the easiest way:

someArray.filter((obj) => obj.property !== "Value you want gone");
1 Like
3

Thank You @DanCouper

This one worked for me.

   const removeIndex = your_array
     .map(function(item) {
       return item.id
     })
     .indexOf("some_id")

   your_array.splice(removeIndex, 1)

   console.log(your_array)
4

I would avoid mutating values , React isn’t designed to do that outside of refs, and afaics you are mutating that array outside of the component lifecycle. Filtering and therefore producing a new array is always going to be preferable, otherwise the reference to the array object remains the same and there is often no way for React to accurately tell that it has updated. It may work in this case, but it’ll generally cause bugs because you’re deliberately removing the ability of React to actually react to changes

And are these actually in your code, or were they just there for console logging:

setFormArray = []

........

        const setFormArray = res.data
         //console.log(setFormArray)
         setStateFormArray(setFormArray)

.........
// This is just `stateFormArray`, as in exactly
// the same, and the variable assignment
// seems to exist solely so that you can bypass
// the setter function you get from `useState`
let newStateFormArray = stateFormArray

Because in the code you posted you seem to be trying to hold onto mutable values by using that instead of [state, setState], which will cause React to misbehave, as it is outside of the lifecycle

Minor, but also there’s no need to map there (and filter does this in one line):

const i = your_array.findIndex(({ id }) => id === "some_id"); 
if (i >= 0) your_array.splice(i, 1);