I have created simple tab component in React.
Here, I'm having content with checkbox. In Tab1, I'm selecting some content and navigating to Tab 2. If I click again Tab 1, there is no checkbox got selected which I clicked earlier. Please help me, how to store the selected checkbox value and how to retrieve that again when I'm clicking Tab 1. Thank you
Sample code here: https://codesandbox.io/s/optimistic-gagarin-npix45
The issue is that you are re-rendering the tab.
Every time you change the active tab you are doing this:
const TabContent = ({ id, activeTab, children }) => {
return activeTab === id ? <div className="TabContent">{children}</div> : null;
};
To fix this, you should store the status of the checkbox checked on the parent component of tabs.
Related
How to enable and disable radio button in reactjs.
I want when we click on radio button it should enable its input box.
Suppose when i select on first Radio Button so first it should display first input box and remain disabled the other input boxes in similar way when first input box is filled enable the second input box and similarly continues.
codesanbox link - https://codesandbox.io/s/loving-gates-clqzc?file=/src/App.js
You can set state on checkbox change event. As example, you can save current checkbox id, and then you can test this id for setting disable or enable for input disabled={isDisabled("formHorizontalRadios1")}:
const [currentCheckboxId, setCheckboxId] = useState("");
const setCheckbox = event => {
setCheckboxId(event.target.id);
};
const isDisabled = id => currentCheckboxId !== id;
See full example in playground: https://codesandbox.io/s/friendly-dubinsky-e1o8y?file=/src/App.js:1490-1535
A new update to SwipeableViews allows for each Tab in the MaterialUI Tabs Component to have their own height. Let me back up a little. Before, MaterialUI Tabs component will show all tabs in the height of the longest tab. This created unnecessary scrolling on tabs that didn't need it. SwipeableViews recently fixed this by adding this to their component
<SwipeableViews
action={actions => {this.swipeableActions = actions;}}>
<div>{'slide n°1'}</div>
<div>{'slide n°2'}</div>
<div>{'slide n°3'}</div>
</SwipeableViews>
and
componentDidUpdate() {
this.swipeableActions.updateHeight();
}
That fixed the height issue across tabs on their loaded state. But when items are hidden and shown with a click event, the height persists and shown items do not show (being cut off from view)
See image (imgur failed to load the image) see the image link instead
image
You need to add:
animateHeight
to the SwipeableViews component.
You may also have to pass a function down to child components in order to update the height when a child modifies the view.
UpdateSwipeableViewHeight = () => {
if (this.swipeableActions) this.swipeableActions.updateHeight()
};
<SwipeableViews
id="searchTabsSwipeableView"
axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
index={activeTabIndex}
onChangeIndex={index => {
this.handleChange(null, index);
this.UpdateSwipeableViewHeight();
}
}
action={actions => (this.swipeableActions = actions)}
animateHeight
>
<div className={classes.swipableViewsComponent}>
<ChildComponent updateHeight={this.UpdateSwipeableViewHeight} />
</div>
For changing states I use redux. I have ChapterList Component where i iterate the list of chapters and display it , also I have Content Component where the content itself is displayed
On the left side i have list of topics, when I click on one of them,this topic's content is displayed on the right side. How to make also the topic from the left to be highlighted.
I want it to be highlighted like here.
I assume that your topic is a separate component, so you can pass 'isActive' prop to it and then in render function check for 'isActive' prop and add an 'active' class.
in Topic component:
render() {
const classes = this.props.isActive ? 'topic topic-active' : 'topic';
return (
<div className={classes} >
...
How can we display the selected value just below the input box.
Use Case:
We are using multiple select of react-select , when we select the value from the select box , it comes inside the input box as selected. Can we have a method or something to get the selected values outside the input box (just below it)
Thanks in Advance!
I had a similar problem and I solved it creating a wrapper of react-select component and adding a state to my custom component. When the react-select changes I added the selected items to my component state and I show the in a custom div below, there you can add the styles that you want. Here an example of my approach: https://codesandbox.io/s/2kyy4998y
Hope this helps you.
Regards
I recently had to do this for a project I'm working on and wrote up how I did it here. The gist is that you need a wrapper component
// SelectWrapper.js
import ReactSelect from 'react-select'
const SelectWrapper = (props) => {
const { isMulti, value } = props;
return (
<div>
{isMulti ? value.map((val) => <span>{val.label}</span>) : null}
<Select {...props} controlShouldRenderValue={!isMulti} />
</div>
)
}
The very important part here is the controlShouldRenderValue prop which we disable when isMulti is true so the select dosn't show any selected values instead letting us take care of that
I have panel wiht toolbar with buttons. Panel resizable when it small buttons hide in menu. In menu it show icon and value of overflowText. But on click button i need change overflowText.
expandClick: function (btn) {
var me = this;
btn.blur();
btn.overflowText = btn.overflowText === "expand" ? "reduce" : "expand";
view.fireEvent('expandGraph', view);
}
in browser's console on breckpoint i see right value but there is no change in interface. Why?!
btn.setConfig( name, [value] );
try to use this function to set specific initial configs dinamically.
Sometimes the button din't refresh his state if you modify directly the variable
Try to refresh component layout with doLayout() method after you change overflowText property.