ReactJS can not rerender Component by onClick

Question

i make simple app with react.js that suggestion random place every time click on Button the problem can not re-render component after one click how can i get new place each time click on button

place.js where fetch API to get data

state = { loading: true, person: null };
  async componentDidMount() {
    let Xyurl = "https://cors-anywhere.herokuapp.com/";
    let url =
      "https://wainnakel.com/api/v1/GenerateFS.php?uid=26.2716025,50.2017993&g et_param=value";

    let response = await fetch(Xyurl + url);
    let data = await response.json();
    this.setState({ place: data, loading: false });

  }
  render() {
    return (
      <div>
        <div>
          {this.state.loading || !this.state.place ? (
            <div>loading......</div>
          ) : (
            <div className="PlcseContiner">
              <img alt="description" src= . 
              {this.state.place.image[0]} />
                {this.state.place.name}

        </div>
      </div>
    );

Suggestion where from button can render places

class Suggestion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false
    };
    this.handleClicked = this.handleClicked.bind(this);
  }
  handleClicked(event) {
    event.preventDefault();
    this.setState({
      visible: true
    });
  }

  generateplace() {
    if (this.state.visible) {
      return <Place />;
    }
    return null;
  }

  render() {
    return (
      <div className="main-button">
        <Button onClick={this.handleClicked} color="warning" className="Btn">
          suggestion
        </Button>
        {this.generateplace()}
      </div>
    );
  }

}

Idan · Accepted Answer · 2019-05-28 07:40:47Z

1

You can control of it from parent with componentWillUpdate so you need to add props to Place component

Suggestion:

class Suggestion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      refresh: 1
    };
    this.handleClicked = this.handleClicked.bind(this);
  }
  handleClicked(event) {
    event.preventDefault();
    this.setState({
      visible: true,
      refresh: this.state.refresh + 1
    });
  }

  generateplace() {
    if (this.state.visible) {
      return <Place refresh={this.state.refresh} />;
    }
    return null;
  }

  render() {
    return (
      <div className="main-button">
        <Button onClick={this.handleClicked} color="warning" className="Btn">
          suggestion
        </Button>
        {this.generateplace()}
      </div>
    );
  }

You need to separate the action to functions like this :

Place:

componentDidMount() {
    this.getPlace()
}

componentWillUpdate(nextProps, nextState) {
    this.getPlace();
}

getPlace = async() => {
    let Xyurl = "https://cors-anywhere.herokuapp.com/";
    let url =
          "https://wainnakel.com/api/v1/GenerateFS.php?uid=26.2716025,50.2017993&g et_param=value";

    let response = await fetch(Xyurl + url);
    let data = await response.json();
    this.setState({ place: data, loading: false });
}

edited May 28, 2019 at 7:40

answered May 27, 2019 at 18:53

Idan

4,1531 gold badge33 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

wafa.A Over a year ago

how to pass getPlace to button it is not at same component

Idan Over a year ago

can you show me what the relationship between the components?

wafa.A Over a year ago

i do import Place Component inside Suggestion Component

Idan Over a year ago

If you render Suggestion inside Place you can pass getPlace function to Suggestion and call to getPlace on onPress button

Idan Over a year ago

I edit my answer to your case, i hope it will work if not work tell me

|

Collectives™ on Stack Overflow

ReactJS can not rerender Component by onClick

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related