setting variables in a map function

Question

I have a function that returns this jsx mixed with some code like this:

showMedia = () => {

  return (
            <div>
                {
                    <div id="mainContent">
                        {props.files.map((file) =>
                            const ext = fileExtension(file.name),
                            const icon = fileIcon(ext),
                            const isImg = isImage(ext),
                            <div key={file.id}>
                                <DisplayResults
                                    fileId={file.id}
                                    downloadName={file.downloadName}
                                    fileTitle={file.title}
                                    isImg={isImg}
                                    icon={icon}
                                    ext={ext}
                                />
                            </div>
                        )}
                    </div>
                }
            </div>
         );
}

In my editor, it's saying that it is expecting an '{' for the const variables I am setting after .map

Am I not using the correct syntax?

Thanks!

Tholle · Accepted Answer · 2018-07-17 15:52:40Z

Since you don't have a function body {} for your arrow function, it is expecting an implicitly returned expression.

Give it a function body and declare your variables and return the JSX instead:

showMedia = () => {
  return (
    <div>
      {
        <div id="mainContent">
          {props.files.map(file => {
            const ext = fileExtension(file.name);
            const icon = fileIcon(ext);
            const isImg = isImage(ext);
            return (
              <div key={file.id}>
                <DisplayResults
                  fileId={file.id}
                  downloadName={file.downloadName}
                  fileTitle={file.title}
                  isImg={isImg}
                  icon={icon}
                  ext={ext}
                />
              </div>
            );
          })}
        </div>
      }
    </div>
  );
};

Tholle · Accepted Answer · 2018-07-17 16:35:25Z

2

You have to add "return" in map function because map always expect to return something, so your problem can be solved by adding this

{props.files.map(file => {
  return (
    <div key={file.id}>
      {/* something */}
    </div>
  );
})}

Hope this help

edited Jul 17, 2018 at 16:35

Tholle

113k22 gold badges209 silver badges198 bronze badges

answered Jul 17, 2018 at 16:06

Adnan

1,70713 silver badges19 bronze badges

Collectives™ on Stack Overflow

setting variables in a map function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related