无法重新渲染子组件reactjs

Question

Good day. I can't rerender my child component when state changed.

export default class Featured extends React.Component {

constructor(){
  super()
  this.state = {
    result: []
  }
}

componentDidMount(){
  $.ajax({
    type: "GET",
    dataType:'JSONP',
    beforeSend: function (request){
      request.setRequestHeader("Authorization", Config.key);
    },
    url: "myUrl",
    success: function(data) {
      this.setState({
        result: data.users
      });
      console.log(this.state.result);//here i got my Array
    }.bind(this)
  });
}

componentWillUnmount(){
  this.serverRequest.abort();
}

render() {
  return (
    <div class="">
      <div class="row">
        <Card data={this.state.result} />
      </div>
    </div>
  );
 }
}

I changed state when ajax request success and i have no idea how to rerender my component . Here is some code of

export default class extends React.Component {

render() {
  console.log(this.props.data);
  return (
    <div class="flex-container">
      { 
        this.props.data.map(function(item, index) {
          return <div class="col-xs-12 col-sm-6 col-md-12" key={item._id}>

What did i miss? Here is console screen http://prntscr.com/ap24x5

Answer 1

Your syntax is incorrect couple of things I can spot right away:

• you cant use class in the render function, you must use className

• your second component has incorrect incorrect syntax, you need to call it something:

  export default class MyComponent extends React.Component {

Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.