Как собрать данные через реквизит и сделать круговую диаграмму React.js и D3 без Redux

Question

Я делаю круговую диаграмму, используя React и D3. Круговая диаграмма должна динамически обновлять изменение элемента. Есть три категории предметов. Я борюсь за то, чтобы передать данные основному компоненту.

У меня есть два других компонента, которые составляют список предметов. Каждый список может удалять, добавлять, редактировать и сохранять. Таким образом, изменение длины списка должно динамически обновляться в круговой диаграмме.

Вот основной компонент списка. У меня есть два других компонента списка для создания списков. Я хочу пройти props.itemSecond.length из второго компонента списка в основной компонент списка.

Я пытался несколько раз к этому, но я не смог этого добиться. Я слышал, что лучше использовать Redux, но разве невозможно реализовать эту функцию без Redux?

Компонент списка

export default class List extends React.Component {
constructor(props){
    super(props);
    this.state={
        questionItem,
        pieData : [{label: "question1", value: 4}, {label: "question2", value: 5}, {label: "question3", value: 3 }]
}
}

createItem(item){
    this.state.questionItem.unshift({
        item : item,
    });

    let length1 = questionItem.length;

    var array = [
    {label : "question1" ,value : length1 },
    {label: "question2", value: 5}, 
    {label: "question3", value: 3} ]

    this.setState({
        questionItem : this.state.questionItem,
        pieData : array
    });
}

findItem(item) {
    return this.state.questionItem.filter((element) => element.item === item)[0];
}

toggleComplete(item){
    let selectedItem = this.findItem(item);
    selectedItem.completed = !selectedItem.completed;
    this.setState({ questionItem : this.state.questionItem });
}

saveItem(oldItem, newItem) {
    let selectedItem = this.findItem(oldItem);
    selectedItem.item = newItem;

    let length1 = questionItem.length;

    var array = [
    {label : "question1" ,value : length1 },
    {label: "question2", value: 5}, 
    {label: "question3", value: 3} ]
     this.setState({ questionItem : this.state.questionItem,
                     pieData : array });
 }

deleteItem(item) {
    let index = this.state.questionItem.map(element => element.item).indexOf(item);
    this.state.questionItem.splice(index, 1);

    let length1 = questionItem.length;

    var array = [
    {label : "question1" ,value : length1 },
    {label: "question2", value: 5}, 
    {label: "question3", value: 3} ]

    this.setState({ questionItem : this.state.questionItem,
                      pieData : array
                 });
}

componentDidMount() {
  const newitemSecond = this.props.itemSecond;
  console.log(newitemSecond)
}

render() {
    const { questionItem } = this.state;
     const { length } = this.props
    return (
    <div>
    <DataChart data = { this.state.pieData} /> 
    <div className="list" style={{"display" : "flex"}}>
    <div className="titleElement" style={{"flex": "1", "backgroundColor" : "orange"}}>Advice + FAQ </div>
    <div style={{"flex": "5", "display": "flex", "flex-direction": "column"}}>
    <QuestionList questionItem={this.state.questionItem} deleteItem={this.deleteItem.bind(this)}  saveItem={this.saveItem.bind(this)} toggleComplete={this.toggleComplete.bind(this)} />
    <CreateItem questionItem={this.state.questionItem} createItem={this.createItem.bind(this)} />
    </div>
     </div>
     <ListSecond />
     <ListThird />
     </div>);
}
}

length 1 получает обновленную длину элемента. Я хочу передать данные из других компонентов так же, как длина 1.

Компонент круговой диаграммы

class DataChart extends React.Component {
    render(){
    var PieChart = rd3.PieChart
     var array = [
        {label : "question1" ,value : 4},
        {label: "question2", value: 5}, 
        {label: "question3", value: 3} ]
    return  (
     <PieChart
      data={this.props.data}
      width={450}
      height={400} 
      radius={110}
      innerRadius={20}
      sectorBorderColor="white"
      title="Pie Chart" />
    )}
    }


  class Chart extends React.Component {
  render() {
    const { length } = this.props
    return (
      <div>Chart: {length}</div>
    )
  }
}