replacing a div element in react-CodePudding

import Y2013 from "./components/Y2013";
import Y2012 from "./components/Y2012";
import Y2011 from "./components/Y2011";
import Y2010 from "./components/Y2010";


function App(){
  return(
    <div className="App">
      ...some divs
    <button onClick={return <Y2013 />} year 2013 </button>
    <button onClick={return <Y2012 />} year 2012 </button>
    ...some divs
    </div>
  )
}

I need to render the Y2013 element when I click on the "year 2013" button. each Y20XX element contains a div with some data regarding that certain year. a friend suggested me to use react router dom , is there an alternative (and faster) way to do so, without making a new .js file for each year?

CodePudding user response：

I would suggest a rethink of your approach. Instead of having a component for each year, separate your data (the information about a particular year) from its presentation (your components), and then feed that data to the component via props.

This has many benefits, but perhaps the one most relevant to your question is that it allows you to swap the display with a simple react state change.

For example, you could do something like the example below (see running demo version in this codesandbox.

import { useState } from "react";

import "./styles.css";

const years = {
  2012: {
    description: "This is the 2012 description.",
    events: ["some event from 2012", "some other event from 2012"]
  },
  2013: {
    description: "This is the 2013 description.",
    events: ["some event from 2013", "some other event from 2013"]
  },
  2014: {
    description: "This is the 2014 description.",
    events: ["some event from 2014", "some other event from 2014"]
  }
};

function Year({ year }) {
  return (
    <div>
      <h1>{year.description}</h1>
      <ul>
        {year.events.map((e) => (
          <li key={e}>{e}</li>
        ))}
      </ul>
    </div>
  );
}

export default function App() {
  const [year, setYear] = useState();
  return (
    <div className="App">
      {Object.keys(years).map((y) => (
        <button key={y} onClick={() => setYear(y)}>
          {y}
        </button>
      ))}
      {year && <Year year={years[year]} />}
    </div>
  );
}

CodePudding user response：

I don't know what's inside those child components, but you could try to make a dynamic one.

import YearComponent from "./components/YearComponent";
import { useState } from 'react';

const App = () => {
  const [year, setYear] = useState(2022);
  const handleYear = (value) => {
    setYear(value);
    return <YearComponent year={year} />
  }

  return(
    <div className="App">
      ...some divs
      <button onClick={() => handleYear(2013)}> year 2013 </button>
      <button onClick={() => handleYear(2012)}> year 2012 </button>
      ...somedivs
    </div>
  )
}

const YearComponent = ({ year }) => {
  const something = () => {
    if (year === 2013) return <h1> in this year this hapened..</h1>
    if (year === 2012) return <h1> in this year that hapened..</h1>
  }

  return (
    <div> 
      {something()}
    </div>
  )
}