How to maintain states for multiple tabs having same panel Components - javascript

How to maintain states for multiple tabs having same panel Components. For example, on tab1 it shows user1 details, on tab2 it shows user2 details. But when I click on tab2 details or inner components it also happen on tab1 because of same redux state. How to manage different state? Maybe on basis of tab index? Or whatever you could suggest.
<Tabs
onChange={handleCurrentPatient}
value={currentPatient}
variant="scrollable"
scrollButtons="auto"
textColor="primary"
indicatorColor="primary"
>
<Tab label="Patients" />
{dynTabs.map((patient, ind) => (
<Tab
label={patient.patientName}
onClick={() => {
dispatch(SetCurrentPatient(patient.emrId));
}}
value={patient.emrId}
key={ind}
icon={
patient.closeIcon ? (
<Box onClick={(e) => e.stopPropagation()}>
<CloseIcon
// fontSize="small"
style={{ fontSize: "16px" }}
/>
</Box>
) : (
""
)
}
iconPosition="end"
/>
))}
</Tabs>;
{
dynTabs.map((item2, index) =>
item2.emrId == currentPatient ? (
PatientList.map((item1, key2) =>
currentPatient == item1.emrId ? ( // tab body of current active tab
<TabPanel key={key2} value={index} index={index}>
<PatientInfo data={item1}></PatientInfo>
<Divider sx={{ borderTop: 1, borderTopColor: "#186ad1" }} />
<PatientRecordTabs />
</TabPanel>
) : (
<></>
)
)
) : (
<>{dynTabs.length == 0 ? setCurrentPatient("000") : <></>}</>
)
);
}
I want different states for same tab panel components on basis of tab id or index whatever. Any suggestions?

Related

Menu content display issue

I need some help pls. I created a menu with section and courses; but the section-labels are repeating.
I would like all courses with the same section to be displayed on a single section lable.
Please see code and screenshot.
<Menu
defaultSelectedKeys={[clicked]}
inlineCollapsed={collapsed}
style={{ height: "100vh", overflow: "scroll" }}
mode="inline"
>
{course.lessons.map((lesson, index) => (
<SubMenu
title={lesson.section}>
<ItemGroup
key={index}>
<Item
onClick={() => setClicked(index)}
key={index}
icon={<Avatar>{index + 1}</Avatar>}
>
{lesson.title.substring(0, 30)}
{" "}
{completedLessons.includes(lesson._id) ? (
<CheckCircleFilled
className="float-end text-primary ml-2"
style={{ marginTop: "13px" }}
/>
) : (
<MinusCircleFilled
className="float-end text-danger ml-2"
style={{ marginTop: "13px" }}
/>
)}
</Item>
</ItemGroup>
</SubMenu>
))}
</Menu>
Screenshot of the Menu
You need to group the lessons by section, then you must iterate over each lessons in the section.
Here is a possible solution :
// group lessons by section into an object {sectionName: [lesson1, lesson2]}
const lessonsBySection = course.lessons.reduce(function(obj, lesson) {
(obj[lesson.section] = obj[lesson.section] || []).push(lesson);
return obj;
}, {});
// get all the sections (sorted alphabetically)
const sections = Object.keys(lessonsBySection).sort();
return (
<Menu ...>
{sections.map((section, sectionIndex) => (
<SubMenu key={section} title={section}>
<ItemGroup>
{lessonsBySection[section].map((lesson, lessonIndex) => (
<Item
key={lesson._id}
onClick={() => setClicked(
courses.lessons.findIndex(l => l._id === lesson._id)
)}
icon={<Avatar>{lessonIndex + 1}</Avatar>}
>
...
</Item>
))}
</ItemGroup>
</SubMenu>
))}
</Menu>
)

React DnD, could not find "store" in the context of Connect(Droppable)

Hello I am trying to make a drag and drop in my application but I have got a huge error. I have no idea if property is missing because in IDE it is an error free code.
Uncaught Error: Could not find "store" in the context of "Connect(Droppable)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Droppable) in connect options.
Down here are my components
3 Columns ( I want drag and drop across one column each, not between them)
const DetailColumns: React.FC<funcProps> = (props) => {
const onDragEnd = () => {};
return (
<Box
h="80vh"
borderWidth="0.5rem"
borderColor="orange.300"
borderRadius="1rem"
w="80%"
marginTop="2rem"
>
<Grid w="100%" h="100%" templateColumns="60% 20% 20%">
<Box border="0.5rem" borderColor="orange.300">
<RecipeDescriptionBox recipe={props.recipe} />
</Box>
<Box borderLeftWidth="0.5rem" borderColor="orange.300">
<RecipeStepsBox recipe={props.recipe} />
</Box>
<DragDropContext onDragEnd={onDragEnd}>
<Box borderLeftWidth="0.5rem" borderColor="orange.300">
<RecipeIngredientsBox recipe={props.recipe} />
</Box>
</DragDropContext>
</Grid>
</Box>
);
};
List of Items
<Box>
<ColumnHeader title="Steps" />
<Droppable droppableId="unique">
{(provided) => (
<Box {...provided.droppableProps} innerRef={provided.innerRef}>
{steps.map((step, index) => (
<DetailListItem
key={step}
itemName={step}
indexOfItem={index}
id={Math.random().toString()}
/>
))}
{provided.placeholder}
</Box>
)}
</Droppable>
</Box>
Item element
<Draggable draggableId={props.id} index={props.indexOfItem}>
{(provided) => (
<Box
{...provided.draggableProps}
{...provided.dragHandleProps}
innerRef={provided.innerRef}
>
<Flex margin="1rem">
<Box
bgGradient="linear(to-r, orange.200, orange.400)"
height="6vh"
width="6vh"
boxShadow="md"
rounded="md"
>
<Grid w="100%" h="100%" placeItems="center">
<Text color="white" fontWeight="700" fontSize="140%">
{props.amount && props.amount + props.unit}
{!props.amount && props.indexOfItem}
</Text>
</Grid>
</Box>
<Grid placeItems="center">
<Text marginLeft="1rem" fontWeight="500" fontSize="1.8rem">
{props.itemName}
</Text>
</Grid>
</Flex>
</Box>
)}
</Draggable>
If you want I can put this code to some sandbox to make it easier to debug.

React beautiful dnd first column of two not working properly - unable to find draggable with id

I've implemented react beautiful dnd into my app, however I've found that dragging items that are initialised in the first column mostly doesn't work (it sometimes works if you keep refreshing). I tried swapping my columns around and it appears the first one rendered has the problem rather than one column having an issue.
I'm not sure what is causing it, the error I receive in the console from the library is:
Unable to find draggable with id: 6112804b8127dd10b00138d8.
The id however matches the ids in my lists and the HTML viewed in inspect element.
Here's the minimum code, I've not included the functions for filtering search, reordering, move and onDragEnd (isn't being fired as it doesn't find the draggable)
const id2List = {
'available': availableSections,
'selected': selectedSections
};
const getList = id => id2List[id];
return (
<Container>
<Widget title={template.name} paddingStyle="10px" buttonRight={<SaveButton handleSubmit={handleSubmit} loading={loading}/>}>
<DragDropContext onDragEnd={onDragEnd}>
<Row>
<Col >
Available Sections
<Form.Control onChange={(e) => setSearchTextAvailable(e.target.value)} className="mb-3" type="text" placeholder="Search..." />
<Droppable key="available" droppableId="available">
{provided => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{Object.keys(visibleAvailableSections).map((section) => {return <SectionCard key ={visibleAvailableSections[section]._id} section={ visibleAvailableSections[section] } index={parseInt(availableSections.indexOf(visibleAvailableSections[section])) } /> })}
{provided.placeholder}
</div>
)}
</Droppable>
</Col>
<Col>
Selected Sections
<Form.Control onChange={(e) => setSearchTextSelected(e.target.value)} className="mb-3" type="text" placeholder="Search..." />
<Droppable key="selected" droppableId="selected">
{provided => (
<div ref={provided.innerRef} {...provided.droppableProps}>
{Object.keys(visibleSelectedSections).map((section) => {return <SectionCard key ={visibleSelectedSections[section]._id.toString()} section={ visibleSelectedSections[section] } index={parseInt(selectedSections.indexOf(visibleSelectedSections[section])) } /> })}
{provided.placeholder}
</div>
)}
</Droppable>
</Col>
</Row>
</DragDropContext>
</Widget>
</Container>
)
const SectionCard = ({section, index}) => {
return (
<Draggable draggableId={section._id.toString()} key={section._id} index={index}>
{provided => (
<Card key={"card-" + section._id.toString()} style={{ width: '18rem' }}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<Card.Body>
<Card.Title>{ section.name }</Card.Title>
<Card.Subtitle className="text-muted">{ section.description }</Card.Subtitle>
{ section.tags.map((tag) => {
return <Badge pill bg={"secondary"} key={section._id + tag} >{ tag }</Badge>
})}
</Card.Body>
</Card>
)}
</Draggable>
);
}

Avoid re-rendering in React when switching between tabs

I have a react application using material-ui to create tabs.
<div className={classes.root}>
<AppBar position="static">
<Tabs value={value} onChange={handleChange}>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
</AppBar>
{value === 0 && <TabContainer id={1}>Item One</TabContainer>}
{value === 1 && <TabContainer id={2}>Item Two</TabContainer>}
{value === 2 && <TabContainer id={3}>Item Three</TabContainer>}
</div>
The TabContainer is a functional component and does some heavy computation.
Is it possible to prevent TabContainer from re-rendering when switching between tabs?
Update:
Check my answer for a solution with React functional components and css classes.
In order to prevent TabContainer from re-rendering. You have to
Render all TabContainer data at once instead of rendering based on value.
You have to play with CSS and have to display only that tab which is currently active.
Also you can make your component as PureComponent or you can override shouldComponentUpdate() lifecycle method to stop extra re-rendering of your react component.
Update/Partial Solution:
With the below code (based on Rahul Jain's answer) using css classes to display the active TabContainer, the memoized functions seems to be really memoized.
const useTabContainerStyles = makeStyles((theme: Theme) => createStyles({
root: {
padding: 8 * 3
},
tabcontainerInActive: {
display: "none"
}
})
);
function TabContainer(props: TabContainerProps) {
const styles = useTabContainerStyles({});
console.log("In TabContainer");
const doubleValue = useMemo(() => double(props.id), [props.id]);
return (
<Typography
id={props.id.toString()}
component="div"
className={classnames(styles.root, {
[styles.tabcontainerInActive]: !props.active
})}
>
{props.children + " " + doubleValue}
</Typography>
);
}
export default function SimpleTabs() {
const classes = useStyles({});
const [selectedTab, setSelectedTab] = React.useState(0);
function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
setSelectedTab(newValue);
}
return (
<div className={classes.root}>
<AppBar position="static">
<Tabs value={selectedTab} onChange={handleChange}>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
</AppBar>
{/* */}
<TabContainer id={0} active={selectedTab === 0}>
Item One
</TabContainer>
<TabContainer id={1} active={selectedTab === 1}>
Item Two
</TabContainer>
<TabContainer id={2} active={selectedTab === 2}>
Item Three
</TabContainer>
</div>
);
}

Is there a way to add a condition to display/hide button for use in different component in React?

This is my first time to develop a react application.
I want to add a button aligned with the pagination buttons (Previous, Next) in for navigating tables.
I've tried to do this by duplicating the Table.js that points to different component (index.js). Is there a more efficient way to add the button using 1 Table.js file, and adding a variable in the index.js as an indicator for displaying/hiding the added button? Or have a better implementation? Thank you
Display Button 1 on component 1 only
Display Button 2 on component 2 only
pagination = pageOptions.length ? (
<Pagination {...getRowProps()}>
<Cell>
<Button onClick={() => previousPage()} disabled={!canPreviousPage}>
Previous
</Button>{" "}
<Button onClick={() => nextPage()} disabled={!canNextPage}>
Next
</Button>{" "}
<span>
Page{" "}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>{" "}
</span>
<span>
| Go to page:{" "}
<Input
type="number"
defaultValue={pageIndex + 1}
onChange={e => {
const page = e.target.value ? Number(e.target.value) - 1 : 0;
gotoPage(page);
}}
style={{ width: "100px" }}
/>
</span>{" "}
<Select
value={pageSize}
onChange={e => {
setPageSize(Number(e.target.value));
}}
>
{[10, 20, 30, 40, 50].map(pageSize => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</Select>{" "}
**<Button onClick={() => test1()}>BUTTON1</Button> -> Display only on component 1
<Button onClick={() => test2()}>BUTTON2</Button> -> Display only on component 2**
</Cell>
</Pagination>
) : null;
return (
<div>
<Table {...getTableProps()}>
{headerGroups.map(headerGroup => (
<HeaderRow {...headerGroup.getRowProps()}>
{headerGroup.headers.map(column => (
<Header
{...column.getHeaderProps()}
sorted={column.sorted}
sortedDesc={column.sortedDesc}
sortedIndex={column.sortedIndex}
>
<div>
<span {...column.getSortByToggleProps()}>
{column.render("Header")}
</span>{" "}
{/* {column.canGroupBy ? (
<Emoji {...column.getGroupByToggleProps()}>
{column.grouped ? "🛑" : "👊"}
</Emoji>
) : null} */}
</div>
{column.canFilter ? <div>{column.render("Filter")}</div> : null}
</Header>
))}
</HeaderRow>
))}
{tableBody}
<Row {...getRowProps()}>
{loading ? (
<Cell>
<strong>Loading...</strong>
</Cell>
) : (
<Cell>{rows.length} Total Records</Cell>
)}
</Row>
{pagination}
</Table>
</div>
);
You should use state in this case.
And change the state from witch component is mounted right now. You can use the react lifecycle methods componentDidMount(){} and componentWillUnmount() {} for setting state.
And then just check the state and add the button.
State and Lifecycle - check the docs, it will answer a lot

Categories