Not putting <li> inside a component in React

First my project; https://codepen.io/zootechdrum/pen/GRgdoWg?editors=0011

I had a question about this section of my code

    return (
      <div class="container">
        <Modal show={this.state.show} handleClose={this.hideModal}></Modal>
        <h1 id="title" class="text-center">Recipe Finder <i onClick={this.showModal} class="far fa-plus-square"></i></h1>
        <ul class="recipe" >
          {recipes.map(recipe => (
            <li className="recipeItem"  onClick={this.handler.bind(this, recipe.name)} >
              {recipe.name} <i onClick={this.delete.bind(this, recipe.name)} className={recipe.name !== "Recipe has not been Added" ? "fas fa-times":""} data-placement="right" data-toggle="tooltip"  title="Delete Recipe" ></i>
            </li>
          ))}
        </ul>
        <RecipeDetails recipe={this.state.currentRecipe} />
      </div>
    );

Is it better practice to have my li inside a component. Or can i just leave it the way its displayed on my code. One of the reason why i went the route that I did, is because I need to pass arguments to my delete function.

This is a good reason not to. By splitting it out you are abstracting. Don’t abstract until it makes things easier: if the <li> had to do more things, or you needed to reuse it in another context, or it made it much easier to understand code-wise, maybe it would be sensible to break it out (I’m going to guess your Modal is an example where it definitely is a good idea, compare with that). But don’t do that preemptively because it will always make your code more complex. This isn’t a React, learning when you should or shouldn’t do it is very important from a general software engineering pov.

So you are saying its not a good idea to leave it the way it is because essentially its making my code less readable. I read a little into abstraction just now. Please correct me if I am wrong, but you are saying the because my <li> are indeed part of something there is no reason why they need to be out in the open like that when they are a small part of a bigger piece.

No, that’s literally the opposite of what I said.

If you put in its own component you would be writing an abstraction over the <li> component and it would make your code more complex. It is your choice to do that, but in this case you have not done that and there is a good reason why you haven’t.

If you put it in its own component you could make the code there a little cleaner, but you then have two components to manage which is on this case probably outweighs any benefit to only managing one component. This is not an issue, it is your choice as to whether you do that or not.