Mapping concept for beginner

APP.tsx

import { Card, datas } from "../src/components/Card";
import "../src/components/Card.css";
import "./App.css";
// import { stringify } from "querystring";
const App = () => {
  /
  return (
    <div className="main">

       {
        datas.slice(0,3).map((val: { title: string; desc: string; id: number; createdDate: string; }) => {
        return (
          <Card
            title={val.title}
            desc={val.desc}
            id={val.id}
            createdDate={val.createdDate}
          />

        );
      })}

    </div>
  );
};

export default App;

components/card.tsx

export interface ICard {
  title: string;
  desc: string;
  id: number;
  createdDate: string;
}


 export const datas : ICard[] = [
  {
    title: "ABC",
    id: 1,
    desc: "this is desc1",
    createdDate: "12/03/2020"
  },
  {
    title: "DEX",
    id: 2,
    desc: "this is desc1",
    createdDate: "17/03/2020"
  },
  {
    title: "IJK",
    id: 3,
    desc: "this is desc1",
    createdDate: "2/03/2020"
  },
  {
    title: "LMN",
    id: 4,
    desc: "this is desc1",
    createdDate: "12/04/2020"
  },
];


export const Card: React.FC<ICard> = ({ title, desc, id, createdDate }) => {
  return (
    <>
      <div className="all">
        <h3>{id}</h3>
        <h1>{title}</h1>
        <p className="desc">{desc}</p>
        <div>{createdDate}</div>
      </div>
    </>
  );
};

Flagicon.tsx

import React from "react";
import ReactDOM from "react-dom";


interface IOption {
  label: string;
  value: string;
  flagImg: string;
  type?: any;
}

const isOption: IOption[] = [
  { label: "Nepal", value: "nepal", flagImg: "nepal" },
  { label: "Canada", value: "canada", flagImg: "canada" },
  { label: "South Korea", value: "south-korea", flagImg: "sk" },
  { label: "USA", value: "USA", flagImg: "usa" },
];



export const SelectOption = () => {
  return (
    <div className="select-option">
      <Select
        // isFormatOptionLabel={isFormatOptionLabel}
        options={isOption}
      />
    </div>
  );
};

textbox.tsx



interface IconProps {
  src: string;
  alt: string;
  style?: object;
  className?: string;
}

interface TextProps {
  type: string;
  placeholder?: string;
  value?: string;
  onChange?: () => {};
  style?: object;
  className?: string;
}

interface TextInputProps {
  iconProps: IconProps;
  textProps: TextProps;
  selectProps: SelectProps;
  optionProps: OptionProps[];
  // iconcountryProps: IconcountryProps;
}

interface SelectProps {
  id: string;
  className: string;
}
interface OptionProps {
  value: string;
  label?: string;
  className?: string;
}

export const Textbox: React.FC<TextInputProps> = ({
  iconProps,
  selectProps,
  optionProps,
  textProps,
  // iconcountryProps,
}) => {
  return (

    <div className="inputbox">
      <img {...iconProps} />
      <input {...textProps} />
      <select {...selectProps}>
        {optionProps.map((val) => {
          return (
            <option {...val.value} {...val.className}>
              {val.label}
            </option>
          );
        })}
      </select>
    </div>
  );
};

card.css

.desc {
  padding: 4rem;
  font-size: 24px;
}

.image {
  height: auto;
  width: auto;
}

.all {
  margin: 30px;
  border: 1px solid black;
  box-shadow: 3px 3px 5px 6px #ccc;
  padding: 30px;
  height: 400px;
  width: 400px;
}

Blog

Mapping concept for beginner

entrepreneur123

Join Our Newsletter. No Spam, Only the good stuff.

Related