A
A
Artyom Gushchin2021-09-15 17:14:45
React
Artyom Gushchin, 2021-09-15 17:14:45

How to design a dashboard in react?

I got a little confused in React)
The essence of the question is I'm trying to build a dashboard in React. There are components - App, Block and several components of different content, let's call them Content.
Block is just a css-smoothed bootstrap card that can be passed a title, classes, and some properties.
In App, I put several Block components into which I pass Content components as props.
But some components can affect the behavior of the Block (add classes, for example).
At the moment, this is done using states declared in App that can re-render the Block component.

But this approach seems wrong to me. I would like to pass SetState to child components in the Block itself, but it seems impossible to modify props. Tried to use Context but couldn't implement it correctly here either. Calling the Block component in each Content component is somehow not DRY.

What is the best approach when designing such applications, where there is one wrapper component, in which different content fits inside the main application?

function App() {
 return (
  <div>
   <Block
    id="users-component"
    title="Users Table"
    classes=[]
    content={
     <MyTable class="users" />
    }
   />

   <Block
    id="status-component"
    title="Status Component"
    classes=[]
    content={
     <Status class="status" />
    }
   />

   <Block
    id="bdays-component"
    title="Bdays Component"
    classes=[]
    content={
     <Bdays class="bdays" />
    }
   />
  </div>
  
 )
}

function Block(props) {
 return (
  <div id={props.id} className={props.classes.join(" ")}>
   <h2>{props.title}</h2>
   {props.content}
  </div>
 )
}

function MyTable(props) {
 return (
  <table className={props.class}></table>
)
}

function Status(props) {
 const handleClick = (title) => {
  changeTitle(title)     // меняем title в родителе (Block)
 }
 return (
  <div className={props.class}>
   <button onClick={() => handleClick("newTitle")}>New Title</button>
  </div>
)
}

function Bdays(props) {
 const handleClick = (class) => {
  addNewClass(class)     // добавляем значение в массив classes в его родительском компоненте Block
 }
 return (
  <div className={props.class}>
   <button onClick={() => handleClick("newClass")}>New Class</button>
  </div>
)
}


PS Added an example. I would like to understand how to forward changeTitle and addNewClass to Block, bypassing App

Answer the question

In order to leave comments, you need to log in

1 answer(s)
L
low molecular macro, 2021-09-15
@molekulyarniy

Why don't small components call the handler in Block? And Block will read the data that came from the child element and, based on them, "add cash registers, for example"?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question