Herm Herm - 1 month ago 7
React JSX Question

Dynamically assigning values in AJAX js calls

I've recently started experimenting with react and I'm trying to push the boundaries (At least in my mind it seems like magic).

I'm trying to create a component that posts to a pre-defined API, using a dynamic data structure i.e. I want to pass the data param as a prop. Here is an example of my current AJAX code:

createModalSubmit(form) {
var name = this.refs.name.value;
$.ajax({
url: `/items.json`,
type: 'POST',
data: item:{name: name} ,
success: (item) => {
this.setState({
item: {
name: ''
},
errors: {},
showModal: false
});
},
error: (item) => {
this.setState({errors: item.responseJSON.errors})
}
});
},


How would I pass the data attribute as a prop in this section of code? I tried doing this as a function i.e:

formData() {
return {
myData: {
item: {
name: name
}
}
}
},


And then passing in this to my data attribute as 'this.formData', but this does not seem to provide happiness.

I tried using vars as well, but the functional method above, made the most sense to me.

What is the best way of passing dynamic values to an ajax js call?

Answer

Here is an example of how you can pass a dynamic value to the ajax call in React: http://codepen.io/PiotrBerebecki/pen/ZpRyKb

In the example, the parent component App is maintaining a state with an object including urls. The parent component is then providing individual urls to its children (Time and Photo) via props.

Here is a full code:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      urls: {
        time: 'http://date.jsontest.com',
        photos: 'http://jsonplaceholder.typicode.com/photos'
      }
    };
  }

  render() {
    return (
      <div>
        <Time url={this.state.urls.time} />
        <Photo url={this.state.urls.photos} />
      </div>
    );
  }
}


class Time extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    $.ajax({
      type: "GET",
      url: this.props.url,
      success: (response) => {
        this.setState({
          data: response.time,
        });
      }
    });
  }

  render() {
    let content;

    if (this.state.data) { 
      content = (
        <div>
          <h1>Current Time</h1>
          <p>{this.state.data}</p>
        </div>
      );
    } else {
      content = <div>Loading...</div>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

class Photo extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    $.ajax({
      type: "GET",
      url: this.props.url,
      success: (response) => {
        this.setState({
          data: response,
        });
      }
    });
  }

  render() {
    let content;

    if (this.state.data) { 
      content = (
        <div>
          <h1>Photo</h1>
          <img src={this.state.data[0].url}/>
        </div>
      );
    } else {
      content = <div>Loading...</div>;
    }

    return (
      <div>
        {content}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,  document.getElementById('content')
);