React component structure help needed - reactjs

Question

I'm learning React, and I don't think I'm grasping everything correctly. I'm just trying to make a data table, but I just don't understand how I should set it up.
I've setup two components. One for the table and one for the rows. From my understanding, I should have a component for a container and another component for presentation. The presentational component should be stateless. Am I doing this right?
class ScheduledTable extends React.Component {
constructor(props) {
super(props);
this.state = {
sales: [],
theAction: "Pause",
liveActive: true,
upcomingActive: false,
completedActive: false
};
this.handleClick = this.handleClick.bind(this);
}
componentWillMount() {
this.setState({
sales: this.props.active_sales,
theAction: "Pause"
});
}
handleClick(e) {
if (e.target.id == "live") {
console.log("clicked Live");
this.setState({
sales: this.props.active_sales,
theAction: "Pause",
liveActive: true,
upcomingActive: false,
completedActive: false
});
} else if (e.target.id == "upcoming") {
console.log("clicked upcoming");
this.setState({
sales: this.props.scheduled_sales,
theAction: "Start Now",
liveActive: false,
upcomingActive: true,
completedActive: false
});
} else {
console.log("clicked completed");
this.setState({
sales: this.props.completed_sales,
theAction: "Duplicate",
liveActive: false,
upcomingActive: false,
completedActive: true
});
}
}
render() {
const latestAction = this.state.theAction;
const header = (
<tr>
<th>Name</th>
<th>Discount</th>
<th>Start Time</th>
<th>End Time</th>
<th>Cents Modification</th>
<th>View/Edit</th>
<th>Action</th>
<th>Cancel</th>
</tr>
);
const rows = [];
this.state.sales.map(function (sale) {
if (sale[4]) {
rows.push(<ScheduledTableRow key={sale[6]} name={sale[0]} discount={sale[1]} startTime={sale[2]} endTime={sale[3]} cMod={5} dType={sale[7]} action={latestAction} />);
} else {
rows.push(<ScheduledTableRow key={sale[6]} name={sale[0]} discount={sale[1]} startTime={sale[2]} endTime={sale[3]} cMod="N/A" dType={sale[7]} action={latestAction} />);
}
}, this
);
return (
<table className="dataTable" id="scheduledSalesTable">
<tbody>
<tr>
<th colSpan="12" className="filterRow">
<span className={this.state.liveActive ? 'filterCell activeUnderline': 'filterCell'} id="live" onClick={this.handleClick}>Live</span>
<span className={this.state.upcomingActive ? 'filterCell activeUnderline' : 'filterCell'} id="upcoming" onClick={this.handleClick}>Upcoming</span>
<span className={this.state.completedActive ? 'filterCell activeUnderline' : 'filterCell'} id="completed" onClick={this.handleClick}>Completed</span>
</th>
</tr>
{header}
{rows}
</tbody>
</table>);
}
}
function ScheduledTableRow(props) {
let discountType;
if (props.dType == "percent") {
discountType = props.discount + "%"
} else {
discountType = "$" + props.discount
}
return (
<tr>
<td>{props.name}</td>
<td>{discountType}</td>
<td>{props.startTime}</td>
<td>{props.endTime}</td>
<td>{props.cMod}</td>
<td>View</td>
<td><button type="button" className="btn btn-success goLiveButton">{props.action}</button></td>
<td className="text-center"><i className="far fa-trash-alt trashBin"></i></td>
</tr>
)
}
My ScheduledTable component seems bulky. Should I be doing it differently? Does it really matter?

Answer 1

In react, there is no sure shot way of doing things. The general abstraction is that containers must handle the logic and should hold state where as presentational components should be state less and be resposible for rendering things on browser i.e DOM elements and styles.
For your case, I would have made the table also a "presentational component" and the page or the component in which table is used as a "container".
Here is a good article by Dan Abramov about the same.
Do keep in mind that this not the only way to do things but this is a good way.