How to transfer a state from a class component to another class component in react?-CodePudding

i am new to React and i am trying to make a CV app. I have a form in PersonalData.js and when i hit submit btn , the state of the class updates the values. I want to pass this state from PersonalData.js to Header.js. In the documentation i have find ways to send it to the main App.js but not to a different class component.

This is how my App.js looks like:

function App() {
  return (
    <div className="App">
      <Header />
    <main>
    <Router>
        <Navbar />
        <Routes>
          <Route path="/" exact element={<PersonalData/>} /> //i want the state from here to go to <Header />
          <Route path="/aboutMe" element={<AboutMe/>} />
          <Route path="/profesional" element={<Profesional/>} />
          <Route path="/education" element={<Education/>} />
          <Route path="/skills" element={<Skills/>} />
          <Route path="/attachments" element={<Attached/>} />
        </Routes>
      </Router>
    </main>
    </div>
  );
}

Header code:

export default class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {
      image: null,
    };
    this.onImageChange = this.onImageChange.bind(this);
    this.hiddenFileInput = React.createRef(null);
  }

  onImageChange = (event) => {
    if (event.target.files && event.target.files[0]) {
      let img = event.target.files[0];
      this.setState({
        image: URL.createObjectURL(img),
      });
    }
  };

  handleClick = (event) => {
    this.hiddenFileInput.current.click();
  };

  render() {
    return (
      <div className="headerGrid">
        <div className="addPhotoButton" onClick={this.handleClick}>
          <i className="fa-solid fa-circle-plus"></i>
          <input
            type="file"
            name="myImage"
            onChange={this.onImageChange}
            ref={this.hiddenFileInput}
            style={{ display: "none" }}
          />
        </div>
        <img className="headerElem" src={this.state.image} alt="" />

        <div className="headerElem">
          <h2>Full Name</h2>
          <p>Current ocupation</p>
          <div>
            <span>Location</span>
            <span>Age</span>
            <span>Sex</span>
          </div>
        </div>
        <div className="headerElem">
          <div>
            <i className="fa-solid fa-envelope"></i>
            <span>Email adress</span>
          </div>
          <div>
            <i className="fa-solid fa-phone"></i>
            <span>Telephone number</span>
          </div>
        </div>
      </div>
    );
  }
}

CodePudding user response：

You can Share by Lifting up the State to the App component.

  function App() {
      const [details,setDetails] = React.useState({
         fullName : "yourName"
         currenOcupation: "React Dev",
         location : "inVirtualDom",
         age:23,
          gender: "male",
          mail: "[email protected]",
          phone : 123456789,          })
      return (
        <div className="App">
          <Header details={details} />
        <main>
        <Router>
            <Navbar />
            <Routes>
              <Route path="/" exact element={<PersonalData details={details}/>} /> //i want the state from here to go to <Header />
              <Route path="/aboutMe" element={<AboutMe/>} />
              <Route path="/profesional" element={<Profesional/>} />
              <Route path="/education" element={<Education/>} />
              <Route path="/skills" element={<Skills/>} />
              <Route path="/attachments" element={<Attached/>} />
            </Routes>
          </Router>
        </main>
        </div>
      );
    }

CodePudding user response：

You can take a look in Context in React Documentation: https://reactjs.org/docs/context.html