ReactJs map structure can't select by material-ui Selectable List component

Question

I'm in trouble.
But I can't write text by English well...
※It may be difficult to read, but please forgive me.

I want to select ListItem component, but ListItem map structure can't select.

What I'm expecting is this.

※At the bottom of the page

My output's rendering result is this.
result

ReactJS code is this.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import emails from './mails'
import {List, ListItem, makeSelectable} from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import ActionGrade from 'material-ui/svg-icons/action/grade';
import Toggle from 'material-ui/Toggle';
import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin();
import PropTypes from 'prop-types';

let SelectableList = makeSelectable(List);

function wrapState(ComposedComponent) {
  return class SelectableList extends React.Component<{defaultValue: number}, {selectedIndex: number}>  {
    static propTypes = {
      children: PropTypes.any.isRequired, 
    };
    constructor(props){
      super(props);
      this.handleRequestChange = this.handleRequestChange.bind(this);
    };

    componentWillMount() {
      this.setState({
        selectedIndex: this.props.defaultValue,
      });
    }

    handleRequestChange = (event, index) => {
      this.setState({
        selectedIndex: index,
      });
    };

    render() {
      let children = React.Children.toArray(this.props.children);
      return (
        <ComposedComponent
          value={this.state.selectedIndex}
          onChange={this.handleRequestChange}
        >
          {children}
        </ComposedComponent>
      );
    }
  };
}

SelectableList = wrapState(SelectableList);


class App extends React.Component<any, any>{
  constructor(props){
        super(props);
        this.state = {
            open: true,
        };

        this.handleToggle = this.handleToggle.bind(this);
    };

  handleNestedListToggle = (item) => {
        this.setState({
            open: item.state.open,
        });
   };

  handleToggle = (e) => {
        console.log("event", e);
        this.setState({
        open: !this.state.open,
        });
  };


  render () {
    const mapStructure = (nodes) => {
    if (nodes) {
      return nodes.map((node, index) => (      
        <ListItem
          value={node.id}
          key={index}
          primaryText={node.primaryText}
          leftIcon={<ActionGrade />}
          initiallyOpen={this.state.open}
          primaryTogglesNestedList={true}
          onNestedListToggle={this.handleNestedListToggle}
          onTouchTap={this.handleToggle}
          nestedItems={mapStructure(node.menu)}
        />
      ));
    }
  };

    return (
      <div>
        <br />
          <MuiThemeProvider>
            <div>
                <Subheader>list</Subheader>
                  <SelectableList>
                    {mapStructure(emails)}
                  </SelectableList> 
          </div>        
        </MuiThemeProvider>
      </div>  
    )
  }  
};

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

./mails is this.

export default [
      {
        id: 1,
        primaryText: "test1"
        ,
        menu: [
          {
            id: 2,
            primaryText: "test2"
          },
          {
            id: 3,
            primaryText: "test3"
          },
          {
            id: 4,
            primaryText: "test4"
          },
          {
            id: 5,
            primaryText: "test5" 
            ,
            menu: [
              {
                id: 6,
                primaryText: "test6" 
              },
              {
                id: 7,
                primaryText: "test7" 
              }]
          }],
      },
      {
        id: 8,
        primaryText: "test8"
      },
      {
        id: 9,
        primaryText: "test9"
      }
    ];

Additional information will be added if necessary. Thank you for reading.

Volodymyr Synytskyi Volodymyr Synytskyi · Accepted Answer · 2017-06-19T09:19:00

I believe the issue is with list toggles properties: primaryTogglesNestedList, onNestedListToggle. Maybe they somehow override the usual behavior of SelectableList click event. Try to remove them and see whether it works for you:

<ListItem
  value={node.id}
  key={index}
  primaryText={node.primaryText}
  leftIcon={<ActionGrade />}
  initiallyOpen={this.state.open}
  onTouchTap={this.handleToggle}
  nestedItems={mapStructure(node.menu)}
/>

ReactJs map structure can't select by material-ui Selectable List component

1 Answers