Answer the question
In order to leave comments, you need to log in
React. How to remove created element from parent's state in child element?
Good afternoon. Please advise how to resolve this issue.
There is a parent element that stores an array of property elements in the state (initially it is empty). Adding properties occurs through a button in the parent element and a function.
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>
)
}
Answer the question
In order to leave comments, you need to log in
Take a look at Swiper.js . Pretty powerful thing with a bunch of settings. Perhaps with its help you will be able to realize your plan.
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)}
/>
))}
</>
);
};
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question