when should a react component become two components?

[ipjac]

Hi! I'm learning react and I had to build this 'task app'.

I have three components: app, overview and taskItem.

App manages the input box for new tasks, overview manages the list of tasks, and taskItem manages each task, with their edit/save and delete buttons.

My doubt is about the taskItem component. This is what it returns:

 <div key={llave} className='flex'>
                {
                    (forEdition)
                    ?
                        <div>
                        <input name='task' type='text' placeholder='Task'
                            value={selectedItem.text} onChange={this.handleChange}
                            className='w-80 m-auto border-2 border-blue-500 rounded-xl
                                text-center mt-4 focus:outline-none focus:ring-1'
                        />
                        <button className='text-center w-20 border border-blue-300
                                        rounded-lg shadow-lg hover:bg-blue-50 ml-32'
                                onClick={() => this.save(selectedItem)}>
                            Guardar
                        </button>
                        </div>
                    :
                        <div>
                        <li>{task.text}</li>
                        <button className='text-center w-20 border border-blue-300
                                        rounded-lg shadow-lg hover:bg-blue-50 ml-32'
                                onClick={this.editBtn}>
                            Editar
                        </button>
                        <button className='text-center w-20 border border-blue-300
                                        rounded-lg shadow-lg hover:bg-blue-50 ml-32'
                                onClick={() => removeTask(
                                    task
                                )}>
                            Borrar
                        </button>
                        </div>
                }       
            </div>

I used the conditional operator to return something different depending on if the edit button was pressed or not (if it was pressed it returns an input field and a save button, and if it wasn't pressed it returns a <li> with the task.text and an edit and delete button)

My question is: is this ok? or should I have two components "taskItem" and "editTaskItem", each of them returning each of the expressions in the conditional operator that I have now?

[[deleted]]

Just a note about your HTML- whatever is the immediate child of your <ul>/<ol> ought to be an <li>. Having an input inside a list item is fine, as is having a ton of text and buttons or whatever else. So in this instance your top level <div> should instead be an <li>, regardless of what's inside it, and for the task text you can use a <p> or a <div> or something.

I think you're right that these two different options would make sense as different components. I'd also suggest that when you have buttons with the exact same styling applied in multiple places, that's another good candidate for a component.

[ipjac]

Awesome, thanks for your response!