The situation is as follows:

There is an input field in which the user enters a sentence in this format: "my name is * Pasha, I want to buy * a car."

The task is to find the words ending in *, after the user has clicked the "Train" button, transfer them to the server, after which the server will return a list of synonyms for the word. Then you need to generate a table with the word in the header and the words from the server below it. The number of columns in the table should be equal to the number of words with an asterisk in the sentence.

I ask for help with a simplified implementation of this task. You need to implement a word search with an asterisk in input. Base words that need to be written in the component. Those without accessing the server and generate a table with these words.

Here is the component code that I have at the moment:

class Content extends React.Component { constructor(props) { super(props); // initial state this.state = { textInput: "" }; } clear = () => { // return the state to initial this.setState({ textInput: "" }); }; 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} /> </Grid> <Grid item> <Button variant="contained" color="primary" style={{ background: "linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)" }} > Обучить </Button> <Tooltip title="Сбросить"> <IconButton> <RefreshIcon color="inherit" style={{ display: "block" }} id="clearButton" onClick={this.clear} /> </IconButton> </Tooltip> </Grid> </Grid> </Toolbar> </AppBar> <div style={{ margin: "40px 16px" }}> <Typography color="textSecondary" align="center"> Пока ничего не было обучено </Typography> </div> </Paper> ); } }

    1 answer 1

    Get an array of words with an asterisk. We divide the sentence by space or comma, then we filter by the presence of an asterisk at the end

     let asteriskWords = this.state.textInput.split("/[\s,]/").filter((item) => { return item.match("/.*\*$/") > -1; });