I have a single component, which contains state written like this:
renderEdit () {
return(
<div className="component-daily-workouts workout-main">
<div className="workout-mode-header">
<WorkoutHeader
{...this.props}
edit={this.state.edit}
/>
</div>
<div className="workout-short">
<strong>{this.props.code}: </strong>{this.props.codeDesc}
{this.props.descriptionShort}
</div>
<div className="workout-long">
{this.props.descriptionLong}
</div>
</div>
)
}
Is there any benefit to pulling out certain pieces as stateless components when in my code above they are not written as additional classes but part of an existing stateful class? I’m having trouble refactoring my application to incorporate stateless components and want to make sure I’m not doing it needlessly within existing components with state.
renderEdit () {
return(
<div className="component-daily-workouts workout-main">
<div className="workout-mode-header">
<WorkoutHeader
edit={this.state.edit}
{...this.props}
/>
</div>
<ShortWorkouts
{...this.props}
/>
<LongWorkouts
{...this.props}
/>
</div>
)
}
const ShortWorkouts = props => (
<div className="workout-short">
<strong>{props.code}: </strong>{props.codeDesc}
{props.descriptionShort}
</div>
)
const LongWorkouts = props => (
<div className="workout-long">
{props.descriptionLong}
</div>
)