define function inside map in reactjs | Fat Arrow function netflix app part 4

 define function inside map in reactjs | netflix app part 4

used file:(index.js, index,css, App.js, Cards.js, Sdata.js)

Source code:-

2.index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Cards from './Cards';
import Sdata from './Sdata';
console.log(Sdata[0].sname)
ReactDOM.render(
  <>
  <h1 className="heading_style" > List of five cards</h1>
    {/* Use map method */}
    {Sdata.map(function ncard(val){
      return(
        <Cards
          imgsrc = {val.imgsrc}
          title = {val.title}
          sname = {val.sname} />
          )
    })};
  </>,
  document.getElementById('root')
);

Using fat arrow function

Normal function 

function myfun(x + y){
  return x + y;
}

Fat arrow function

const myfun = (x + y) => {
  return x + y;
}

Or

const myfun = (x + y) => x + y;

using Fat arrow function in index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Cards from './Cards';
import Sdata from './Sdata';
console.log(Sdata[0].sname)
ReactDOM.render(
  <>
  <h1 className="heading_style" > List of five cards</h1>
    {/* Use map method */}
    {Sdata.map((val) =>{
      return(
        <Cards
          imgsrc = {val.imgsrc}
          title = {val.title}
          sname = {val.sname} />
          )
    })};
  </>,
  document.getElementById('root')
);