address two component
`<AddressTwo/>`
i had applied toggle logic but i am trying to add and delete component
<Button
onClick={()=>setIsToggled(!isToggled)}>+</Button>
{isToggled && <AddressTwo/>}
add when this is clicked
`<Button >+</Button>`
remove component when this button is clicked
` <Button>-</Button>`
Change your way to do,
think that the address is one component that receives 1 object
{ id: Number, street: String, number: String, postCode: String }
and the number of addresses is an array of object
[ {...}, {...}]
in react it's maybe easier to manage this way
const [addresses, setAdresses] = useState([])
const addOne = () => setAddresses([...addresses, { id: null, street: "", number: "", postCode: "" }]
{...}
return(
<>
<h1>hello from profile</h1>
<button onclick={()=>addOne()}/>+</button>
{addresses.map((address, i)=>(
<AddressComponent address={address} />
)}
</>
)
the code is not perfect but you got the IDEA
then from there, you can play with the array as you want... (pop, push, limit, find, etc...)
courage...