How do I fetch some data from external API in react JS?

componentDidMount() {
    const url = "https://jsonplaceholder.typicode.com/posts";
    fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((json) => {
      let posts;
      if(json.userId > 16 ){
        return console.log();
      }
});

I'm trying to fetch 15 data from external API which has like 100 data, here's the code I'm currently writing but when I run it, it won't show any data

It looks like you're on the right track with using the fetch function to retrieve data from an external API. However, I noticed a few issues with your code that may be causing it to not display any data.

First, in your fetch call, you're only checking the response from the API in the then block. However, you need to also handle any errors that may occur. You can do this by adding a .catch block at the end of the then block.

Second, in your json response, you're only checking if the userId is greater than 16, but you're not actually doing anything with the data. To display the data, you need to set it to the component state or render it directly in your component's render method.

Here's an example code snippet that fetches the first 15 posts from the JSONPlaceholder API and stores them in the component state:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      error: null,
    };
  }

  componentDidMount() {
    const url = "https://jsonplaceholder.typicode.com/posts?_start=0&_limit=15";
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })
      .then((data) => {
        this.setState({ posts: data });
      })
      .catch((error) => {
        this.setState({ error: error });
      });
  }

  render() {
    const { posts, error } = this.state;

    if (error) {
      return <div>Error: {error.message}</div>;
    }

    return (
      <div>
        <h1>Posts</h1>
        <ul>
          {posts.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      </div>
    );
  }
}

In this code, we're using the fetch function to retrieve the first 15 posts from the API by adding _start=0 and _limit=15 query parameters to the URL. We're also handling any errors that may occur using the .catch block.

When the data is successfully retrieved, we're storing it in the component state using this.setState. In the render method, we're mapping over the posts array in the state to render each post's title in an unordered list.

If an error occurs, we're displaying an error message instead of the post list.

I hope this helps! Let me know if you have any further questions.