CODEWITHSUNDEEP
javascriptreactjsaudioreact-props
Katie Melosto
Katie Melosto

Reputation: 1177

how to reload component back to original state when a prop changes in react

I have a prop called props.currPage. It updates depending on what button is pushed. Whenever a button is pushed, I'd like part of the component to reset back to its original state.

Currently, I cannot get the "listen to this page" button to reappear when i props changes.

Here is the codesandbox.

Below is the header.js file. If I click "listen to this page" it displays an audio player. If I click either button "one" "two" or "three" (that's part of another component) the audio player should go away, and "listen to this page" should reappear:

import React, { useState } from "react";
import ReactPlayer from "./ReactPlayerEx";
import { Button } from "@chakra-ui/react";

function Header(props) {
  const [showAudio, setAudio] = useState(0);
  return (
    <>
      {/* <Audio currPage={props.currPage} /> */}
      <div onClick={setAudio}>
        {showAudio ? (
          <ReactPlayer currPage={props.currPage} />
        ) : (
          <Button border={0}> Listen to this Page</Button>
        )}{" "}
      </div>
    </>
  );
}

export default Header;

Here is the audio player, ReactPlayerEx.js that will render when "listen to this page" is clicked

import React, { useEffect, useState } from "react";
import ReactPlayer from "react-player";

function RP(props) {
  const url =
    // "github.com/cre8ture/audioFilesForBL/raw/main/1.mp3"
    "https://github.com/cre8ture/audioFilesForBL/blob/main/" +
    props.currPage +
    ".mp3?raw=true";

  return (
    <div>
      <ReactPlayer
        url={url}
        // "https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"
        width="200x"
        height="50px"
        // style={{"textAlign": "left", "color": "red", "backgroundColor": "green"}}
        // light
        // playIcon = {<Button border={0} borderRadius={20} p={8}><Play/>  Listen to this Page </Button>}
        playing={false}
        controls={true}
      />
    </div>
  );
}

export default RP;

Here are the three buttons component, threeButtons,js

import React from "react";

function Tabs(props) {
  return (
    <>
      <button onClick={() => props.handleChangeProps(1)}>ONE</button>
      <br />
      <button onClick={() => props.handleChangeProps(2)}>TWO</button>
      <br />
      <button onClick={() => props.handleChangeProps(3)}>THRE</button>
    </>
  );
}

export default Tabs;

And here is the App.js

import React, { useState } from "react";
import Header from "./components/header";
import ConceptTabs from "./components/threeButtons";

function App() {
  const [pageID, setPageID] = useState(0);

  // goes to ConceptTabs
  let handleChange = (id) => {
    console.log("clicked", id);
    setPageID(id);
    return id;
  };

  console.log("pageID", pageID);

  return (
    <>
      <Header currPage={pageID} />
      <br />
      <ConceptTabs handleChangeProps={handleChange} />
      <br />
      {/* <ReactPlayer /> */}
    </>
  );
}

export default App;

thank you. I believe my issue is a poor knowledge of useEffect(). I'm quite new to React.

Upvotes: 0

Views: 2808

Answers (1)

Shan
Shan

Reputation: 1568

Add useEffect which will trigger everytime when props.currPage changes and sets the ReactPlayer visibility to false, only if it's already true.

import React, { useState, useEffect } from "react";
import ReactPlayer from "./ReactPlayerEx";
import { Button } from "@chakra-ui/react";

function Header(props) {
  const [showAudio, setAudio] = useState(false);
 
  useEffect(() => {
    if (showAudio) setAudio(false);
  }, [props.currPage]);

  return (
    <>
      {/* <Audio currPage={props.currPage} /> */}
      <div>
        {showAudio ? (
          <ReactPlayer currPage={props.currPage} />
        ) : (
          <Button border={0} onClick={() => setAudio(true)}>
            Listen to this Page
          </Button>
        )}
      </div>
    </>
  );
}

export default Header;

Upvotes: 0

Related Questions