Render a button after the child, ReactJS

Question

here I am mapping a component, which results in many project cards being rendered on the screen. I would like to render a plus button after the last child inside of the map. I am thinking of something such as:last-child selector in CSS but I need to be able to set onClick and other stuff to that button. I was thinking there might be other "react pure" way to solve this? Any ideas?

projectsByCompany[companyKey].map((project) => (
      <Project
        name={project.name}
        year={project.year}
        to={`${props.match.url}/${project.slug}`}
      />
    ))}

Answer 1

map functions second argument is the index of current element so you can render button when i is pointing to the last element in the array

               projectsByCompany[companyKey].map((project,i) => (
                        <React.Fragment>
                            <Project
                                name={project.name}
                                year={project.year}
                                to={`${props.match.url}/${project.slug}`}
                            />
                            {i===projectsByCompany[companyKey].length-1&&<button>Add</button>}
                        </React.Fragment>
                    ))