0

I am making a container for a d3 line graph that I'm going to create, my format so far is this: 

import React from "react";
import AnalyticPads from "../AnalyticPad/AnalyticPad";
import Pad from "../AnalyticPad/Pad";
import MainContent from "../AnalyticPad/MainContent";
import Extention from "../AnalyticPad/Extention";



const GraphPad = () => {

    return ( 
        <AnalyticPads properties={{height: "200px"}}>
            <Pad>
                <MainContent>

                </MainContent>
                <Extention>

                </Extention>
            </Pad>
        </AnalyticPads>
    )

}

export default GraphPad;

And my "AnalyticsPad" looks like this:

import React from "react";

const AnalyticPads = (props) => {

    return ( 

       <div className="analytic-pad-container">
            {props.children}
       </div>
    )

}

export default AnalyticPads;

What I want is that there will be a grid of "Pads" and I want this "AnalyticsPad" to provide default styles for each pad, for example if I want each pad to have a height of 200px I set it in this wrapper and then for any individual pad that I want to differ from the default I can overide it.

The "MainContent" component is where the line graph will be and any extra information will be put inside the "Extention" which will render if a button is pressed.

Throughout my react app I keep using the context api to provide the data to the children components, but I know ( or think ) it is bad practice to do this, from what I understand context should only be used for providing data to global components.

What is best practice?

please don't answer with a solution for class components as I have never used them before as I am new to react.

jake_prentice
  • 61
  • 1
  • 7
  • Look at react-redux – BENARD Patrick May 19 '20 at 13:40
  • @BENARD Patrick when I've watched some videos on youtube about redux I feel the setup is too long and tedious for such little things, so I've never tried learning it. – jake_prentice May 19 '20 at 13:58
  • It's because of video is long to watch... Just read a tuto, much shorter and faster... https://redux.js.org/basics/example – BENARD Patrick May 19 '20 at 14:00
  • sorry if this is stupid question but doesn't context api do the same thing as redux :) – jake_prentice May 19 '20 at 14:02
  • no stupid, and after, how do you change the context from children ? Redux is cool, but it's one way between many, [change context from children](https://stackoverflow.com/questions/41030361/how-to-update-react-context-from-inside-a-child-component) is more harder than implementing a redux architecture. Do it one time, a second, and the third will be easy, I promise, you'll love it. – BENARD Patrick May 19 '20 at 14:05
  • Alright I will try it out, is the structure of my components a good way of going about the problem or would you have done it a different way... – jake_prentice May 19 '20 at 14:09
  • In your main component the properties will be extracted... Their will be in the redux-reducer state. In the component who'll set the properties you'll call an redux action that will modify the redux state. The other component than need this properties will be connected to redux... Like this, the properties will be connected as every component that need them. – BENARD Patrick May 19 '20 at 14:15

0 Answers0