React, Vue and Svelte: Comparing Data Rendering

Data rendering in...

As you can see, every framework has his own method to loop through data.
React will use map method, Vue has the v-for method and Svelte goes full mustache syntax with {#each}{/each} approach.

Check it out 🚀

React

Link

import { useState } from "react";
const [jobs, setJobs] = useState([
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
]);

<ul>
  {
    jobs.map((job) => (
      <li>{job.title}</li>
    ))
  }
</ul>

Vue

Link

import { ref } from "vue";
// `reactive` could be used instead of `ref`
const jobs = ref([
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
]);

<template>
<ul>
  <li v-for="job in jobs" :key="job.id">
    {{ job.title }}
  </li>
</ul>
</template>

Svelte

Link

const jobs = [
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
];

<ul>
{#each jobs as {id, title}, i}
  <li id={id}>
    {title}
  </li>
{/each}
</ul>