React checkbox state management with react-bootstrap or material-ui?

Question

I am working on a project. I would using checkboxes on a component and would like to show some products which have some features. Features will be defined by user's check. I would like to know how to manage checkbox and state infos together.

I have done this project with <List> and <ListGroup> .I listed a category list in a companent. And when I select one of them(wtih onClick) I can see products which have same CategoryId on my Json-Server.(managed by my_reducer)

I researched on internet and material-ui is more usefull at checkbox management, I think. What do you think? Should I use material-ui instead of react-bootstrap for checkbox?Using both material and bootstrap at the same project will effect my web-page's loading speed? Or does it occurs any other problems?

I'm open with any idea. You can share your idea with me or you can send me guide, docs, examples about it.

ps: Please do not add github or offical pages of checkbox usage(both react and material-ui:) Because I already know them and couldn't find answers for my questions.

Thx.

Answer 1

Since you do not provide any code, it is hard to see what you are trying to achieve and what does "more useful at checkbox management" mean in this context. You mention <List> and <ListGroup> , but how are you using the checkbox, or are you simulating a checkbox with actionable ListGroup items?

I do not think it is a good idea to mix two user interface libraries. You would end up with inconsistent look and feel, and there could be conflicts with styles etc. Adding a new dependency will increase the loading time based on the size of the dependency. If you like material-ui better, it would make sense to migrate the whole project use it.

Answer 2

Here is the code try this may be it works...and it helps.

class ShowFeatures extends React.Component {        
        constructor(props) {
                super(props);
                this.state = {
                   showfchr: false
                };
        }


       toggleChange = () => {
        this.setState({
          showfchr: !this.state.showfchr,
        });
      }

    render() {
        return (
        <React.Fragment>
               <div>
                <input type="checkbox" checked={this.state.showfchr} onChange={this.toggleChange}
                />
                Show Me Some Features!
               </div>
                  { this.state.showfchr ? (  
                     <div> Your All Feature Will Show here</div> 
                   ):(
                     <div>here is defaullt</div>
                    ) 
         </React.Fragment>
        );
      }
}