React. Как удалить созданый элемент из state родителя в дочернем элементе?

Question

[NikolayIII]

Добрый день. Подскажите как решить данный вопрос.

Есть родительский элемент, который хранить в стейте массив элементов свойств (изначально он пустой). Добавление свойств происходит через кнопку в родительском элементе и функцию.

const ConstructorPage = () => {
	const [property, setProperty] = useState([])
	
	const delProperty = () => {	
		//функция удаления созданного свойства из property
	}
	
	const addProperty = () => {
		const key = Math.random() * 100,
		  newProperty = <Property key={key} obj={obj} forObj={forObj} delProperty={delProperty} />

		setProperty([...property, newProperty])
	}
	
	return (
		<> 
			<Button onClick={() => addProperty()}>Add</Button>
			
			{property}
		</>
	)
}

Дочерний элемент принимает функцию удаления из родительского и по кнопке должен ее вызвать.

const Property = (props) => {
	return (
		<div>
			//необходимые данные
			<Button onClick={() => props.delProperty()}>Del</Button>
		</div>
	)
}

Но получается так, что в каждое созданное свойство сохраняется предыдущее состояние массива property и при вызове функции удаления в массиве property еще не существует данного элемента Свойства. Как сделать так, чтобы функция delProperty имела доступ к актуальному состоянию property, а не к предыдущему?

Answer 1

[0xD34F]

const Property = ({ data, onDelete }) => (
  <div>
    #{data.id}
    <button onClick={onDelete}>Del</button>
  </div>
);

const ConstructorPage = () => {
  const [ properties, setProperties ] = useState([]);
  const delProperty = property => setProperties(properties.filter(n => n !== property));
  const addProperty = () => setProperties([
    ...properties,
    {
      id: 1 + Math.max(0, ...properties.map(n => n.id)),
    },
  ]);
  
  return (
    <> 
      <button onClick={addProperty}>Add</button>
      {properties.map(n => (
        <Property
          key={n.id}
          data={n}
          onDelete={() => delProperty(n)}
        />
      ))}
    </>
  );
};