Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

70
Vistas
How to change React component properties based on random events?

I saw similar questions in here, but they aren't addressing this specific issue.

I have a react function component like this,

function Overlay() {
  return <div className="off"></div>;
}

I want to change its className property later based on a click event that occurs on a Btn element. Note that the Btn element isn't a parent or a child of the Overlay element.

function Btn() {
  return <button onClick={changeOverlayProperty} ></button>;
}

So, what should "changeOverlayProperty" do to achieve the result? Is there any "react way" to do it other than relying on the usual element methods such as "getElementsByClassName"? Giving actual codes will be helpful as I'm totally new to ReactJS.

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

The ContextAPI can be used to send the className value to another Component:

import { createContext, useState, useContext } from 'react';
const Context = createContext("off"); // <= Create a Context so that state can be shared among different Components (including siblings)

function Overlay() {
  const { className } = useContext(Context); // Grab the className value from the Context. The value className will be set via the Btn Component's click handler
  return <div className={className}>Overlay</div>;
}

function Btn() {
  const { setClassName } = useContext(Context); // Grab the setClassName method from the Context
  return <button onClick={()=> setClassName("on")} >Change Class</button>;
}

export default function App() {
  const [ className, setClassName ] = useState("off");
  return (
    <>
    {/* Wrap the Components that need to share some value in a Context.Provider and share some values via the value prop */}
    <Context.Provider value={{ className, setClassName }}>
      <h1>React</h1>
      <Overlay />
      <Btn />
    </Context.Provider>
    </>
  );
}

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>
<style>.off { background: red } .on { background: green }</style>
<script type="text/babel">
const Context = React.createContext("off");

function Overlay() {
  const { className } = React.useContext(Context);
  return <div className={className}>Overlay</div>;
}

function Btn() {
  const { setClassName } = React.useContext(Context);
  return <button onClick={()=> setClassName("on")} >Change Class</button>;
}

function App() {
  const [ className, setClassName ] = React.useState("off");
  return (
    <Context.Provider value={{ className, setClassName }}>
      <h1>React</h1>
      <Overlay />
      <Btn />
    </Context.Provider>
  );
}

ReactDOM.render( <App />, document.getElementById("root") );
</script>

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.