In which folder should I put common functions that I export for import into various components?

Question

JavaScript

The project has folders for each component, where each has its own files for styles and its own jsx, but inside this jsx-a there is only code for its component.
For example, I have such a function, it renders links to me, I use it in different components.
In which folder are such functions usually placed?)) If some standardized name or place. There are a number of other functions that are also used in several components. Or is it better to leave your own in each component so that the component is independent, you can pull it out, insert it in another place and everything works?)

renderLinks(links) {
    return links.map((link,index) => {
      return (
        <li key={index}>
         <NavLink 
          to={link.to} 
          exact={link.exact}       
          onClick={this.clickHandler}
        >
          {link.label}
        </NavLink>
        </li>
      )
    })
  }

Answer 1

This is a perennial topic of discussion. Standardization is such a vague concept that it is simply ignored and everyone "standardizes" the code in their own way) In a team, this often depends on the preferences of the team lead. Take it out the way you feel comfortable - it's important that you think. You are doing the right thing by highlighting the abstraction. For example, this function can be rendered simply as a list renderer, do not bind it to components. Name the folder src/utils.
In each team, abstractions are distinguished in their own way, so if you even understand that you need to highlight abstractions, then what you should now put in src / utils, and then, if your team does not like it, put it somewhere else - the meaning is the same.

Answer 2

If some of your components have a lot of the same methods, you can look towards HOC