autosuggest not showing item immediately

Question

I am looking into fixing a bug in the code. There is a form with many form fields. Project Name is one of them. There is a button next to it.So when a user clicks on the button (plus icon), a popup window shows up, user enters Project Name and Description and hits submit button to save the project. The form has Submit, Reset and Cancel button (not shown in the code for breviety purpose).

The project name field of the form has auto suggest feature. The code snippet below shows the part of the form for Project Name field.So when a user starts typing, it shows the list of projects and user can select from the list.

<div id="formDiv">
                <Growl ref={growl}/>
                <Form className="form-column-3">
                    <div className="form-field project-name-field">
                        <label className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated custom-label">Project Name</label>
                        <AutoProjects
                            fieldName='projectId'
                            value={values.projectId}
                            onChange={setFieldValue}
                            error={errors.projects}
                            touched={touched.projects}
                        />{touched.projects && errors.v && <Message severity="error" text={errors.projects}/>}
                        <Button className="add-project-btn" title="Add Project" variant="contained" color="primary"
                                type="button" onClick={props.addProject}><i className="pi pi-plus" /></Button>
                    </div>

The problem I am facing is when some one creates a new project. Basically, the autosuggest list is not showing the newly added project immediately after adding/creating a new project. In order to see the newly added project in the auto suggest list, after creating a new project,user would have to hit cancel button of the form and then open the same form again. In this way, they can see the list when they type ahead to search for the project they recently created.

How should I make sure that the list gets immediately updated as soon as they have added the project?

Below is how my AutoProjects component looks like that has been used above:

import React, { Component } from 'react';

import Autosuggest from 'react-autosuggest';
import axios from "axios";
import { css } from "@emotion/core";
import ClockLoader from 'react-spinners/ClockLoader'

function escapeRegexCharacters(str) {
    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// Use your imagination to render suggestions.
const renderSuggestion = suggestion => (
    <div>
        {suggestion.name}, {suggestion.firstName}
    </div>
);

const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;

export class AutoProjects extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            value: '',
            projects: [],
            suggestions: [],
            loading: false
        }

        this.getSuggestionValue = this.getSuggestionValue.bind(this)
        this.setAutoSuggestValue = this.setAutoSuggestValue.bind(this)
    }

    // Teach Autosuggest how to calculate suggestions for any given input value.
    getSuggestions = value => {
        const escapedValue = escapeRegexCharacters(value.trim());

        if (escapedValue === '') {
            return [];
        }

        const regex = new RegExp(escapedValue, 'i');
        const projectData = this.state.projects;

        if (projectData) {
            return projectData.filter(per => regex.test(per.name));
        }
        else {
            return [];
        }
    };

    // When suggestion is clicked, Autosuggest needs to populate the input
    // based on the clicked suggestion. Teach Autosuggest how to calculate the
    // input value for every given suggestion.
    getSuggestionValue = suggestion => {
        this.props.onChange(this.props.fieldName, suggestion.id)//Update the parent with the new institutionId
        return suggestion.name;
    }

    fetchRecords() {
        const loggedInUser = JSON.parse(sessionStorage.getItem("loggedInUser"));
        return axios
            .get("api/projects/search/getProjectSetByUserId?value="+loggedInUser.userId)//Get all personnel
            .then(response => {
                return response.data._embedded.projects
            }).catch(err => console.log(err));
    }

    setAutoSuggestValue(response) {
        let projects = response.filter(per => this.props.value === per.id)[0]
        let projectName = '';
        if (projects) {
            projectName = projects.name
        }
        this.setState({ value: projectName})
    }

    componentDidMount() {
        this.setState({ loading: true}, () => {
            this.fetchRecords().then((response) => {
                this.setState({ projects: response, loading: false }, () => this.setAutoSuggestValue(response))
            }).catch(error => error)
        })
    }

    onChange = (event, { newValue }) => {
        this.setState({
            value: newValue
        });
    };

    // Autosuggest will call this function every time you need to update suggestions.
    // You already implemented this logic above, so just use it.
    onSuggestionsFetchRequested = ({ value }) => {
        this.setState({
            suggestions: this.getSuggestions(value)
        });
    };

    // Autosuggest will call this function every time you need to clear suggestions.
    onSuggestionsClearRequested = () => {
        this.setState({
            suggestions: []
        });
    };

    render() {
        const { value, suggestions } = this.state;

        // Autosuggest will pass through all these props to the input.
        const inputProps = {
            placeholder: value,
            value,
            onChange: this.onChange
        };

        // Finally, render it!
        return (
            <div>
                <Autosuggest
                    suggestions={suggestions}
                    onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                    onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                    getSuggestionValue={this.getSuggestionValue}
                    renderSuggestion={renderSuggestion}
                    inputProps={inputProps}
                />
                <div className="sweet-loading">
                    <ClockLoader
                        css={override}
                        size={50}
                        color={"#123abc"}
                        loading={this.state.loading}
                    />
                </div>
            </div>
        );
    }
}

Answer 1

The problem is you only call the fetchRecord when component AutoProjects did mount. That's why whenever you added a new project, the list didn't update. It's only updated when you close the form and open it again ( AutoProjects component mount again) For this case I think you should lift the logic of fetchProjects to parent component and past the value to AutoProjects. Whenever you add new project you need to call the api again to get a new list.