React change css style of a div in another component by button clicking in another component-CodePudding

on my Project I have a banner on top of my site with 2 buttons. when I click the button profile I want it to change the css style of a div in another component. this is my code for the banner:

import Profile from "./Profile";

function Banner() {

const invis=false;

   
  return (
    <div className="banner">
      <span className="bannerbtnsettings">
        <button className="btnbannersettings">Settings</button>
      </span>

      <span className="bannerbtnprofile">
        <button className="btnbannerprofile" onClick={Profile.changeStyle}>Profile</button>
      </span>
    </div>
  );
}

export default Banner;

this is my code for the div in the other component:

import "../index.css";
import React, { useState } from "react";


const Profile = () => {
  const [style, setStyle] = useState("profile-hidden");
  
  const changeStyle = () => {
    console.log("you just clicked");
  
    setStyle("profile-displayed");
  };
  





  
  return (
    <div>
      <div className={style}> hellllo</div>
    </div>
  );
  };

export default Profile;

I can only find information about this with parent-child components. They said I should use a usestate import but I can't seem to get it working. what's the proper way to do this?

CodePudding user response：

All you need is lift your state to parent component, if you have a long trip to your common ancestor you can try to use a context. Attached a working example. Hope it helps!

const Banner = ({ onClickHandler }) => {
  return (
    <div className="banner">
      <span className="bannerbtnsettings">
        <button className="btnbannersettings">Settings</button>
      </span>

      <span className="bannerbtnprofile">
        <button className="btnbannerprofile" onClick={() => onClickHandler()}>Profile</button>
      </span>
    </div>
)}

const Profile = ({ style }) => {
  
  return (
    <div>
      <div className={style}>I'm your profile :)</div>
    </div>
  );
};


const App = () => {
  // We lift the state
  const [style, setStyle] = React.useState("profile-hidden"); 
  const profileHandler = () => {
    setStyle(style === 'profile-hidden' 
      ? 'profile-displayed'
      : 'profile-hidden')
  }
  
  return(
    <div>
      <Banner onClickHandler={profileHandler} />
      <Profile style={style} />
    </div>
    )
}



// Render
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

.profile-hidden {
  display: none;
}

.profile-displayed {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<div id="root"></div>

CodePudding user response：

You cannot use this syntax for React Components COMPONENT.method , in your case onClick={Profile.changeStyle} !

Instead you should make Banner parent component and use Profile component as child inside it or vise versa !

then You should pass the state style as props so then you will be able to use its value.

your code should look like this :

function Banner() {

  const [style, setStyle] = useState("profile-hidden");

  const changeStyle = () => {
    console.log("you just clicked");
  
    setStyle("profile-displayed");
  };
   
  return (
    <div className="banner">
      <span className="bannerbtnsettings">
        <button className="btnbannersettings">Settings</button>
      </span>

      <span className="bannerbtnprofile">
        <button className="btnbannerprofile" onClick={changeStyle}>Profile</button>
      </span>

      <Profile style={style} />
    </div>
  );
}

export default Banner;

and your Profile component :

const Profile = (props) => {
  return (
    <div>
      <div className={props.style}> hellllo</div>
    </div>
  )
}