CODEWITHSUNDEEP
reactjsmaterial-ui
sphoenix
sphoenix

Reputation: 3607

How to pass a function as props to a component of Material-UI for React?

I wanted to make an Appbar which will contain a SearchBar. for this I was using Material-UI for React.

I have a file in my component section which loads the Appbar

Here is the appbar.js

function SearchAppBar(props) {
  const { classes, placeholder, writeInput } = props;

  return (
    <div className={classes.root}>
      <AppBar position="fixed">
        <Toolbar>
          <IconButton
            className={classes.menuButton}
            color="inherit"
            aria-label="Open drawer"
          >
            <MenuIcon />
          </IconButton>
          <Typography
            className={classes.title}
            variant="h6"
            color="inherit"
            noWrap
          >
            My Weather
          </Typography>
          <div className={classes.grow} />
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder={placeholder}
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput
              }}
              onChange={this.writeInput}
            />
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
}

SearchAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
  placeholder: PropTypes.string,
  writeInput: PropTypes.func
};

export default withStyles(style_appbar)(SearchAppBar);

After that, I imported this file to another file named searchbar.js.

Why I did that?

Well, so that I can control the input with the component state and the props

Here is the searchcbar.js

import React, { Component } from "react";
import AppBar from "./appbar";

export default class Search extends Component {
  constructor(props) {
    super(props);

    this.state = { term: "" };
    this.onInputChange = this.onInputChange.bind(this);
  }

  onInputChange(event) {
    console.log(event.target.value);
    this.setState({ term: event.target.value });
  }

  render() {
    return (
      <AppBar
        placeholder="Search forecast for your favorite cities..."
        value={this.state.term}
        writeInput={this.onInputChange}
      />
    );
  }
}

And then I imported this file to my app.js.

Before diving deep, I wanted to see if everything works, so I put a console log but I am not getting any console log.

Rather I am having the error,

Cannot read property 'writeInput' of undefined in appbar.js:46:29

writeInput is the function which I was sending to the Materila-UI's component as a props!

The link of the sandbox of the code is here, you can check the output too.project's sandbox

ps. It maye take some time for the sandbox to boot up!

So, can I not send a function as props to the Material-UI's component? If not what's the alternate way to resolve this issue?

Upvotes: 1

Views: 1930

Answers (1)

Hemadri Dasari
Hemadri Dasari

Reputation: 33994

You can send a function to functional component and access it. Don’t use this when calling writeInput. Since you are assigning const { writeInput} = props; you have to call writeInput or if you don’t assign like this then you can call props.writeInput

PFB corrected code

 <InputBase
          placeholder={placeholder}
          classes={{
            root: classes.inputRoot,
            input: classes.inputInput
          }}
          onChange={writeInput}
        />

Upvotes: 1

Related Questions