Using state data as a props in other component conditionally - reactjs

Question

Here is my one component DISPLAY,
import React, { Component } from "react";
import ListGroup from "./listGroup";
class Display extends Component {
handleAllClick = (e) => {
e.preventDefault();
return (
<ListGroup
data={this.props.data}
onSubmitted={this.handleSubmit}
onClicked={this.handleAllCheck}
onChanged={this.handleChange}
onCheckChange={this.handleCheckChange}
onDeletion={this.handleDelete}
/>
);
};
handleCompleted = (e) => {
e.preventDefault();
return (
<ListGroup
data={this.props.data}
onSubmitted={this.handleSubmit}
onClicked={this.handleAllCheck}
onChanged={this.handleChange}
onCheckChange={this.handleCheckChange}
onDeletion={this.handleDelete}
/>
);
};
render() {
return (
<div>
<button
type="button"
className=" all btn btn-light p-1 mr-3"
onClick={this.handleAllClick}
>
All
</button>
<button
type="button"
className=" act btn btn-light p-1 mr-3"
onClick={this.handleActiveClick}
>
Active
</button>
<button
type="button"
className=" comp btn btn-light p-1"
onClick={this.handleCompleted}
>
Completed
</button>
</div>
);
}
}
export default Display;
Actually I want to use state which is named by data in the main component and that data contains a boolean variable called completed.
Now I wanted to conditionally use this completed as props with ListGroup component(Which I have imported above).
This should look like this:
handleCompleted = (e) => {
e.preventDefault();
(!this.props.completedItem &&
<ListGroup
data={this.props.data}
onSubmitted={this.handleSubmit}
onClicked={this.handleAllCheck}
onChanged={this.handleChange}
onCheckChange={this.handleCheckChange}
onDeletion={this.handleDelete}
/>
);
};
(I have passed this completed as completedItem in the main component).
But the problem is this is not working the right way!