list rendering in react

-

 import { useEffect, useState } from "react";


function App() {


  const [product, setProduct] = useState();


  useEffect(() => {

    fetch('https://dummyjson.com/products')

      .then(res => res.json())

      .then(data => {

        console.log(data.products);

        setProduct(data.products);

      });

  }, []);


  return (

    <>

      <h3>Main App</h3>

      <br></br>

      <br></br>


      <table>

        <tr>

          <th>Title</th>

          <th>Description</th>

          <th>Price</th>

        </tr>

        <tbody>

          {

            (product && product?.length) && (product.map((product,index)=>(

          <tr key={index}>

            <td>{product.title}</td>

            <td>{product.description}</td>

            <td>{product.price}</td>

          </tr>

          )))

        }

        </tbody>

      </table>


    </>

  );

}


export default App;


Popular posts from this blog

MCSL 216 MCA NEW Practical ~ common questions suggestions

-
Topic: JS VALIDATION   Q1. Design a form for booking room through a Hotel website. The form should have relevant fields (make suitable assumptions). Further, the form should have Submit and Reset button. Now, perform following: Marks: 20   Solution: <html>     <title>hotel form booking</title>     <body>         <br>         <h2>Hotel Form</h2>         <br>           <form id="booking_form">             <label for="p_name">Person Name</label> <br>             <input type="text" id="p_name" name="p_name">          ...
Read more

dev chaeatsheet

-
Image
dev cheatsheet link: https://docs.google.com/document/d/15gRGAB57iEFs_TGsqrk08_OZ36mX1yfsMKCYM6qX7gk/edit?usp=sharing Topic: WordPress Theme Dev We can develop our custom theme in wordpress. Let’s first understand the folder structure of wordpress.contact form Let me assure you, how can you make a proper structure of a wordpress project.  front-page.php: This template is used to display the front page of the site. It's often used for the site's homepage. index.php: This is the fallback template used when more specific templates are not available. It usually displays a list of posts. style.css: This file contains the styles for your theme. While it can include theme author details in comments, its primary purpose is to style the HTML elements of your theme. single.php: This template is used to display a single post's details.             404.php: handle 404 error page         ...
Read more

STRAPI

-
Image
  Strapi helps us to provide pre-made cms backend. In strapi everything is about content type.   Topic: Weird Things About STRAPI Topic: Document Save States When we want to store a post into strapi, that time it gives us 2 options: “publish”, “save”. When we create content as publish/save it creates 2 different records. First 2 are for “save” and the rest 2 are for “publish”. Good thing is when creating a new publish/save it delta the OLD one ID and create a NEW one. Topic: Content Type change in strapi We can add multiple fields into strapi content type. For changing the Column Type we need go in inside /src/your-content-type/schema.json /* OLD ONE */ "attributes": {     "title": {       "type": "string"     },     "description": {       "type": "text",   "length": 80     }, /* NEW ONE */ "description": {    ...
Read more