我有一個父組件（index.js），它有一個狀態x:[]，狀態包含數據[{…}, {…}, {…}]&我有一個子組件（child.jsx），在子組件（child.jsx）中，我想將父組件數據保存[{…}, {…}, {…}]在一個變量中在子組件中。父組件（index.js）//here i have more importsimport Child from "./child"export default class Index extends Component {    constructor(props) {        super(props);        this.state = {              x: [],          };    }//some functionsrender() {    const { x } = this.state;    console.log(x, "this is the data")        // x contains data [{…}, {…}, {…}]          return (           <div className="class">                                                             <Autocomplete x={this.state.x} />               </div>            }}子組件（child.jsx）//here i have importsconst suggestions =  here i want x data from the parent component;//some functionsexport default function Child(props) { return (    <div className="material">      <div className={classes.root}           <Autosuggest          {...props.x}        />      </div>    </div>  );}當我嘗試傳遞一些道具時，主要是出現未定義的錯誤。預期結果："x data from the parent component" const suggestions = [{…}, {…}, {…}];