how to render a button for just the first element in the array in react-CodePudding

i want to render the download button just for the first element in the array and for the rest the button will be disabled

allFileVersions.map((eachVersion) => {
                return (
                  <div className="d-flex">
                    <div className="">versions:</div>
                    <div className="">{eachVersion.FileName}</div>
                    {/* <div>DOwnload</div> */}
                    <div
                      className={
                        "saveblue mg-r-10 "  
                        (allFileVersions[0]
                          ? ""
                          : "disabled")
                      }>
                      <i className="fas fa-download pd-r-5" /> Download</div>
                  </div>
                );
              })

CodePudding user response：

allFileVersions.map((eachVersion, index) => {
  return (
    <div className="d-flex">
      <div className="">versions:</div>
      <div className="">{eachVersion.FileName}</div>
        {/* <div>DOwnload</div> */}
        <div className={"saveblue mg-r-10 "   (index === 0 ? "" : "disabled")}>
        <i className="fas fa-download pd-r-5" /> Download</div>
    </div>
  );
})

CodePudding user response：

allFileVersions.map((eachVersion,index) => {
                return (
                  <div className="d-flex">
                    <div className="">versions:</div>
                    <div className="">{eachVersion.FileName}</div>
                     {index === 0 && (
                            <div>DOwnload</div>
                      )}
                  
                    <div
                      className={
                        "saveblue mg-r-10 "  
                        (allFileVersions[0]
                          ? ""
                          : "disabled")
                      }>
                      <i className="fas fa-download pd-r-5" /> Download</div>
                  </div>
                );
              })

The map function gives you two values. The current item of the iteration and the current index. You can use the index to check if it's the first item.

CodePudding user response：

allFileVersions.map((eachVersion, index) => { return ( versions: {eachVersion.FileName} {/* DOwnload */} <div className={ saveblue mg-r-10 ${index === 0 ? "" : "disabled"} }> Download ); })

Use the index for your logic instead.