how to add component on button click in react

Question

Hello I want to add a react component to the dom on button click. Here I have a simple function for it.

const addCargo = () => {
        const parentElement = document.getElementById("addCargoContainer");
        parentElement.insertBefore(<Cargo />, parentElement.children[2]);
    }

but this gives me the following error:

Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.

Is there a possible way to do this?

const {cargos, setCargos} = useState([<Cargo />]) const addCargo = () => { setCargos([...cargos, <Cargo />]) } Well I tried this but doesnt seem to be working too — Bot Ellis
– Bot Ellis, Commented Sep 30, 2022 at 14:59

twharmon · Accepted Answer · 2022-09-30 15:01:53Z

4

Will something like this work?

function Cargo() {
  return <div>cargo</div>
}

function Ship() {
  const [cargos, setCargos] = useState([])

  const handleAddCargo = () => {
    const newCargo = Date.now()
    setCargos(v => [...v, newCargo])
  }

  return (
    <>
      <h1>ship</h1>
      <button onClick={handleAddCargo}>add cargo</button>
      {cargos.map(() => <Cargo />)}
    </>
  )
}

answered Sep 30, 2022 at 15:01

twharmon

3,7905 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vipin rao · Accepted Answer · 2022-09-30 15:19:37Z

1

const [isCargoVisible,setIsCargoVisible] = useState(false);
return(
    <>
    <button onClick={()=>setIsCargoVisible(true)}>Hit me to add cargo div</button>
    {
      isCargoVisible ? (
        <div id='addCargoContainer'>
          {/* Your code inside */}
        </div>
       ) : null
    }
  </>
)

answered Sep 30, 2022 at 15:19

Vipin rao

92 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

how to add component on button click in react

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related