CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Sahand
Sahand

Reputation: 8360

Material-UI MenuItem automatically sends argument to onClick function?

I have a search.js file and a search-date.js file. In the search.js file, I render a SearchDate container. What I don't understand is the behaviour of the MenuItem component when it is clicked.

As you can see, the function onDayChange is passed down from Search to SearchDate. This function is then passed to MenuItem on the onClick property. onDayChange in Search needs a date argument.

Right now the alert call I've made outputs: object. Where does this object come from? I can't see anywhere in my code that it's being sent by me. And I'm not sure where to look in the Material-UI docs.

search.js:

import SearchDate from '../components/search-date';
import { modelInstance } from '../model/model';    

class Search extends Component {
  constructor(props){
    super(props)
    this.state = {
      data: null,
      searchSuggestion: 'Search for tweets here',
      anchorEl: null,
      date: 'Today',
      page: 0,
      placeName: 'the World'
    }

  componentDidMount() {
    modelInstance.addObserver(this);
  }

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  onDayChange = date => {
    alert(typeof date);
    this.setState({date: date})
    this.setState({ anchorEl: null });
  };



  render(){
    return(
        <div className='search'>
          <Row id='searchInput'>
            <SearchInput handleInput={this.handleInput.bind(this)} searchInput={this.state.searchInput} searchSuggestion={this.state.searchSuggestion} page={1}/>
          </Row>
          <Row>
            <SearchNav page={this.state.page}/>
          </Row>
          <Row id='date-location'>
            <Col xs={2} sm={2} md={2} className='text'>
              <p>FROM</p>
            </Col>
            <Col xs={4} sm={4} md={4} className='date'>
              <SearchDate date={this.state.date} anchorEl={this.state.anchorEl} click={this.handleClick} dayChange={this.onDayChange}/>
            </Col>
            <Col xs={2} sm={2} md={2} className='text'>
              <p>IN</p>
            </Col>
            <Col xs={4} sm={4} md={4} className='location'>
              <SearchLocation placeName = {this.state.placeName} handleLocation={this.handleLocation.bind(this)}/>
            </Col>

          </Row>
        </div>
    )
  }
}

export default Search;

search-date.js:

const SearchDate = ({date, anchorEl, click, dayChange}) => {   
    return(
    <React.Fragment>
      <Button
        // variant="raised"
        aria-owns={anchorEl ? 'simple-menu' : null}
        aria-haspopup="true"
        onClick={click}
        margin={10}
      >
        {date}
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={dayChange}
      >
        {/* {daysList} */}

        <MenuItem onClick={dayChange}>Yesterday</MenuItem>
        <MenuItem onClick={dayChange}>2 Days past</MenuItem>
        <MenuItem onClick={dayChange}>3 Days past</MenuItem>
        <MenuItem onClick={dayChange}>4 Days past</MenuItem>
        <MenuItem onClick={dayChange}>5 Days past</MenuItem>
        <MenuItem onClick={dayChange}>6 Days past</MenuItem>
        <MenuItem onClick={dayChange}>7 Days past</MenuItem>
      </Menu>
    </React.Fragment>
  );
}

export default withStyles(styles)(SearchDate);

Upvotes: 2

Views: 2927

Answers (1)

Chris Lincoln
Chris Lincoln

Reputation: 388

Material-UI passes the DOM event as an argument on the onClick.

onDayChange = (date) => (event) => { ...your code }

<MenuItem onClick={onDayChange('2 days past')}>2 Days past</MenuItem>

You can pass whatever you want in the event handler. The outer function will get called at the time of rendering. The inner function, which has your handler, will get at the time of menu item click. So your date parameter might get stale if the page doesn't refresh over night, for instance. Personally, I'd pass the # of days as the argument, then get the current date in the handler and do the offset there.

Upvotes: 3

Related Questions