To fetch data from an API and render it in a component, you can use JavaScript frameworks like React.js or Vue.js. I'll provide examples using both frameworks:

React.js Example:

import React, { useState, useEffect } from 'react';

function DataComponent() {
    const [data, setData] = useState([]);

    useEffect(() => {
        // Fetch data from the API
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error('Error fetching data:', error));
    }, []);

    return (
        <div>
            <h1>Data from API</h1>
            <ul>
                {data.map(item => (
                    <li key={item.id}>{item.name}</li>
                ))}
            </ul>
        </div>
    );
}

export default DataComponent;

In this React.js example, we use the useState and useEffect hooks to manage state and perform side effects (such as fetching data) respectively. We fetch data from the API endpoint 'https://api.example.com/data' using the fetch API and update the component's state with the received data. We then render the data in a list.

Vue.js Example:

<template>
  <div>
    <h1>Data from API</h1>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          this.data = data;
        })
        .catch(error => console.error('Error fetching data:', error));
    }
  }
};
</script>

In this Vue.js example, we use the data option to define the component's data property, which holds the fetched data. We use the mounted lifecycle hook to fetch data when the component is mounted to the DOM. The fetchData method fetches data from the API endpoint 'https://api.example.com/data' using the fetch API and updates the component's data property with the received data. We then render the data in a list using the v-for directive.

You can choose the framework that best suits your project requirements and integrate it into your application to fetch and render data from an API.

Edited