How to set up data transfer between components? - reactjs

Question

I need to transfer filterArray data to component TableGenerator from the component Content. They are both child components of App.js
I have tried to transfer data from component Content.js to component TableGenerator.js, they are both child components of App.js. You can see what I did here:
class App extends Component {
updateData = (value) => {
this.setState({filterArray: value})
}
render() {
return (
<div className="App">
<Header/>
<br></br>
<Content updateData={this.updateData}/>
<br></br>
<TableGenerator data={this.state.filterArray}/>
</div>
);
}
function TableGenerator() {
const allUsers = [
{пользователь: "Александра"},
{пользователь: "Шура"},
{пользователь: "Настя"},
{пользователь: "Ира"},
{пользователь: "Ваня"},
{пользователь: "Жора"},
{пользователь: "Гриша"}
];
return (
<Paper style={{maxWidth: 936, marginLeft: '250px'}}>
<Table>
<TableHead>
<TableRow>
{Object.keys(allUsers[0]).map((TableRow, i) => (
<TableCell key={i} align="center">{TableRow.split("_").join(" ")}</TableCell>
))}
</TableRow>
</TableHead>
<p>Props: {this.props.filterArray}</p>
<TableBody>
{allUsers.map((user, i) => (
<TableRow key={i}>
{Object.values(user).map((v, j) => (
<TableCell key={j} align="center">{v}</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</Paper>
);
class Content extends React.Component {
constructor(props) {
super(props);
// initial state
this.state = {
textInput: '',
filterArray: []
}
}
clear = () => {
// return the state to initial
this.setState({
textInput: ''
})
}
parseInput = () => {
let tempArray = this.state.textInput.split(" ");// `convert string into array`
this.state.filterArray = tempArray.filter(word => word.endsWith('*'));
}
render() {
return (
<Paper style={{maxWidth: 936, marginLeft: '250px', overflow: 'hidden'}}>
<AppBar position="static" color="default" elevation={0}>
<Toolbar>
<Grid container spacing={16} alignItems="center">
<Grid item xs>
<TextField
fullWidth
placeholder="Введите фразу которую нужно обучить"
id='textInput'
InputProps={{
disableUnderline: true,
}}
value={this.state.textInput}
onChange={(e) => {
this.setState({textInput: e.target.value})
}}
/>
</Grid>
<Grid item>
<Button
variant="contained"
color="primary"
style={{background: 'linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)'}}
onClick={this.parseInput()}
>
Обучить
</Button>
<Button
variant="contained"
color="primary"
style={{background: 'linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)'}}
onClick={() => {
this.props.updateData(this.state.filterArray)
}}
>
Генерировать
</Button>
<Tooltip title="Сбросить">
<IconButton>
<RefreshIcon color="inherit" style={{display: 'block'}} id='clearButton'
onClick={this.clear}/>
</IconButton>
</Tooltip>
</Grid>
</Grid>
</Toolbar>
</AppBar>
</Paper>
);
}

Answer 1

Two errors (1) parseInput() in Content.js, update state using setState() (2) Your props name is data in TableGenerator but you are accessing this.props.filterArray, it should be this.props.datai have created a sandbox as per you code. It is passing data from Content.js to TableGenerator.js.
parseInput = () => {
let tempArray = this.state.textInput.split(" "); // `convert string into array`
let filterArray = tempArray.filter(word => word.endsWith("*"));
this.setState({ filterArray });
};