Search code examples
reactjsjsxreact-props

Update a rendered component props

Can I update a React component's props such as a className due to an event like a click? It seems impossible since the component is rendered.

Solution

  • yes, you can.

    create a state and keep className:

    const [elmClass, setElmClass] = React.useState("first");

    use className and update it onClick:

    <div className={elmClass} onClick={() => {setElmClass("second")}>
  Change my className
</div>

    take a look at this example:

    https://codesandbox.io/s/fast-bash-bcfx7