Change props from imported component-CodePudding

I want codes that changes "isBlogPage" by SwitchButton(imported component) /* click SwitchButton -> Change isBlogPage -> Re-render in index.js*/

SwitchButton.js

import React, { useState } from "react";

const SwitchButton = () => {
  const [isBlogPage, setisBlogPage] = useState(true);
  return (
    <button
      className="switch-button"
      onclick={() => (isBlogPage ? setisBlogPage(false) : setisBlogPage(true))}
    >
      {isBlogPage ? "To Post" : "To Blog"}
    </button>
  );
};

export default SwitchButton;

index.js

import SwitchButton from "../../components/Home/SwitchButton";

const Home = (isBlogPage) => {

...

if (isBlogPage) {
    return (
      <div className="main-body">
        <Header />
        <SwitchButton />
      </div>
    );

Deeply appreciate for your help :) !

CodePudding user response：

What you want to do is called Lifting state up. Basically, that means moving your state to the parent component and pass down to the child component. In your case

index.js

import { useState } from "react";
import SwitchButton from "../../components/Home/SwitchButton";

const Home = (isBlogPage) => {
  // "lifting state up"
  const [isBlogPage, setisBlogPage] = useState(true);
...

if (isBlogPage) {
    return (
      <div className="main-body">
        <Header />
        // pass down to child component
        <SwitchButton isBlogPage={isBlogPage} setisBlogPage={setisBlogPage} />
      </div>
    );

SwitchButton.js

// here, get the passed props
const SwitchButton = ({isBlogPage, setisBlogPage}) => {

  return (
    <button
      className="switch-button"
      onclick={() => (isBlogPage ? setisBlogPage(false) : setisBlogPage(true))}
    >
      {isBlogPage ? "To Post" : "To Blog"}
    </button>
  );
};

export default SwitchButton;

CodePudding user response：

Prefer writing like this lifting state from parent to child, use && when you want to display only on value otherwise ternary operator :

App.js

import React, { useState } from 'react';
import SwitchButton from './Button';

function App() {
const [isBlogPage, setisBlogPage] = useState(true);

return (
<div className="main-body">
 <SwitchButton isBlogPage={isBlogPage} setisBlogPage={setisBlogPage}/>
</div>
 );
 }

 export default App

Button.js

 import React from "react";
 const SwitchButton = ({isBlogPage,setisBlogPage}) => {

 function handleChange(){
 setisBlogPage(prevState => !prevState)
  }

 return (
 <div className="switchbutton">
 <button className="switch-button" onClick={handleChange}>
 {isBlogPage ? "To Post" : "To Blog"}
 </button>
 </div>
 )
 }

export default SwitchButton;