default export- export – import

Key Points

  • When you are doing export directly, you have to import in curly braces 
    • export const oldCricketData = [{}]
    • import { oldCricketData} from “./CricketData”;
    • If you change name while importing it will be error
      • import { myOwnoldCricketData} from “./CricketData”; — This will be error
  • When you export at the end
    • const cricketData = [{}]
    • export default cricketData;
    • import cricketDataChanged from “./CricketData”;
    • Even you can change name while importing , it will not give you error
      • import mycricketerdata from “./CricketData”; — No error 
 
Component

import cricketDataChanged, { oldCricketData } from "./CricketData"; 

				
					import React from "react";
import cricketDataChanged, { oldCricketData } from "./CricketData";

const Cricketers = () => {
  const getDetails = (id) => {
    let cricketDetailById = cricketDataChanged.find((data) => data.id === id).details;
    console.log(cricketDetailById);
  };
  return (
    <>
      {cricketDataChanged.map((data) => {
        //return <Cricketer cricket={data} key={data.id} />;
        return <Cricketer {...data} key={data.id} getDetails={getDetails} />;
      })}

      {oldCricketData.map((data) => {
        //return <Cricketer cricket={data} key={data.id} />;
        return <Cricketer {...data} key={data.id} getDetails={getDetails} />;
      })}
    </>
  );
};

const Cricketer = (props) => {
  //const { name, category } = props.cricket;
  const { name, category, id, getDetails } = props;
  console.log(props);

  return (
    <div>
      <ul>
        <li>{name}</li>
        <li>{category}</li>
        <button onClick={() => getDetails(id)}>Details</button>
        <hr></hr>
      </ul>
    </div>
  );
};
export default Cricketers;
DATA

export default cricketData;

export const oldCricketData = [ 

				
					const cricketData = [
  {
    id: 1,
    name: "SKY",
    category: "AllRounder",
    details: "He is MR 360",
  },
  {
    id: 2,
    name: "Ishan Kishan",
    category: "Batsman",
    details: "Explosive batsman with a double century",
  },
  {
    id: 3,
    name: "Siraj",
    category: "Bowler",
    details: "fast bowler from Hyderabad",
  },
];

export const oldCricketData = [
  {
    id: 1,
    name: "Sachin",
    category: "AllRounder",
    details: "Master blaster",
  },
  {
    id: 2,
    name: "Sourav Ganguly",
    category: "AllRounder",
    details: "X Indian Captain",
  },
];

export default cricketData;

Leave a Comment