Why it is showing unreachable code after return?-CodePudding

The statement after return (Where I am sending props to ProList , in the mapping section) is showing unreachable. I am still learning react. Can anyone help me in this regard?

import "./Workcard.css"
import React from 'react'


import ProList from "./ProList"
import projcarddata from "./ProlistData"

const Workcard = () => {
  return (
    <div className="work-container">
        <h1 className="project-heading">Projects</h1>
            <div className="project-container">
                    {
                    projcarddata.map((val,ind) => 

                          { 
                           
                            return
                            (
                              <ProList key={ind} imgsrc={val.imgsrc} title={val.title} text={val.text} view={val.view} source={val.source}/>
                            );
                          }
                          )
                    }
            </div>
    </div>
  );
};

export default Workcard

CodePudding user response：

It's because of Automatic semicolon insertion .....

It would turn as return; ....

so instead turn it as below (see the above link for more info)

return(
  ....
)

CodePudding user response：

This can be fixed in two ways

Way 1: remove the braces after the return

Workcard = () => {
        return (
            <div className="work-container">
                <h1 className="project-heading">Projects</h1>
                <div className="project-container">
                    {projcarddata.map((val, ind) => {
                        return <ProList key={ind} imgsrc={val.imgsrc} title={val.title} text={val.text} view={val.view} source={val.source} />;
                    })}
                </div>
            </div>
        );
    };
```




Way 2: remove the return statement and directly add the return value after the arrow




```
Workcard = () => {
        return (
            <div className="work-container">
                <h1 className="project-heading">Projects</h1>
                <div className="project-container">
                    {projcarddata.map((val, ind) => (
                        <ProList key={ind} imgsrc={val.imgsrc} title={val.title} text={val.text} view={val.view} source={val.source} />
                    ))}
                </div>
            </div>
        );
    };
```