0

I have a component How its work; When I mouse over on list object so its working anyway

import React from 'react';

const ExampleComponent = ({show}) => {
  const componentClasses = ['example-component'];
  if (show) { componentClasses.push('show'); }

  return (
    <div className={componentClasses.join(' ')}></div>
  );
};

ExampleComponent.propTypes = {
  show: React.PropTypes.bool.isRequired
};

export default ExampleComponent;

And I'm using like this; 

 import SubButtons from './subButtons';

 return shownAccountList.map((item) => {
  return(
    <List>
      <ListItem
        primaryText={text={ item.accountItem }}
      />
      <SubButtons show={this.state.subButtonsVisible}/>
    </List>
  );

This result: enter image description here

Expected Result; I want only trigger the element I brought to the mouse for example if I selected line 1 Should work under the only line 1

Btw: I'm using material-ui . I accept if you have another recommendation.

Uğur Erdal
  • 67
  • 1
  • 12
  • 1
    I'm not sure what you're asking for. If you can provide more details or a working demo that would really help. Based on what I think you mean, maybe take a look at this answer: https://stackoverflow.com/a/41145452/8378419 – Robbie Milejczak Oct 27 '17 at 19:24
  • I'm not sure what you're asking with this question. – MEnf Oct 27 '17 at 20:19
  • `const ExampleComponent = ({show}) => {` should probably be `const ExampleComponent = props => {`, and `if (show)` should be `if (this.props.show)` – Derek Oct 27 '17 at 20:49
  • Actually thats clear with image. So I want only this; its rendering when I over on a line its back to a component. So I sent it a boolean value and its back to a component. But this rendering every line I want only selected line. Just imagine look the pic. and close second red one for example My cursor on the firts line and there is a only one red line You got it ? – Uğur Erdal Oct 28 '17 at 11:40

0 Answers0