Fresh Call To API EndPoint on Button Click in React JS

Question

I haven API endpoint, that gives me a random text, on each call. As of now, when the React Component loads for the first time, a call goes through to the API and I get the random text.

The code looks like this. I am using redux for state management.

const RandomQuoteList = ({ todo, isLoading, startLoadingTodos }) => {
    useEffect(() => {
        startLoadingTodos();
    }, []);

    const [inputValue, setInputValue] = useState(`HelloThere`);

    function changeRandomText(e) {
        
        // const item = e.target.value;
        var something = Math.random();
        console.log(`changeRandomText clicked + ${something}`);
        setInputValue(`changeRandomText clicked + ${something}`);
        console.log(inputValue);
      }    
    
    const loadingMessage = <div>Loading todos...</div>;
    const content = (
        <GeneralWrapper>
            <RandomQuoteItem todo = {todo} inputValue = {inputValue}/>
            <Button onClick={changeRandomText}>Get A New Quote</Button>
        </GeneralWrapper>

    );
    return isLoading ? loadingMessage : content;
};


const mapStateToProps = state => ({
    isLoading: getTodosLoading(state),
    todo: getTodos(state),
});

const mapDispatchToProps = dispatch => ({
    startLoadingTodos: () => dispatch(loadTodos()),
});

export default connect(mapStateToProps, mapDispatchToProps)(RandomQuoteList);

Now, I want to be able to use a simple button click to 'refresh' the API call. That way, the API endpoint will be triggered and a fresh new text will get updated.

I have looked at the following stack over flow questions.

React: re render componet after button click

How to refresh React page/component on Button click after POST

ReactJs : How to reload a component onClick

But, I am not getting far. I am able to randomly change the state of a text component, and that is changing the text component. So, I have the random value change part taken care of.

The target component looks something like this. When I click the button on the above component, the below component updates the random text no problem.

const RandomQuoteItem = ({ todo,inputValue }) => {
    //set the style for the display.
    // const Container = todo.isCompleted ? TodoItemContainer : TodoItemContainerWithWarning;
    const Container = TodoItemContainer;
    return (
        <Container>
            {/* this is where you show your API response single items. */}
            <h3>{todo.quoteContent}</h3>
            <h4>{todo.quoteAuthor}</h4>
            <h4>{todo.quoteIdentifierString}</h4>
            <p>-------------------------------</p>
            <h4>{todo.quoteIdentifierCompadre}</h4>
            <h4>{todo.dateTimeOfResponse}</h4>
            <h4>{todo.detailsAboutOperation}</h4>
            <p>{inputValue}</p>
        </Container>
    );
}

Now, how do I link this random state change to my RandomQuoteItem state, so, it makes fresh data call?

You could try a simple onClick function and call `startLoadingTodos()` — rahuuzz, Mar 18 '22 at 07:46
Yes, that worked!! I will update it as an answer below. just in case, others come looking. thank you. — Jay, Mar 18 '22 at 11:20

score 0 · Answer 1 · answered Mar 18 '22 at 11:24

Based on the comment from rahuuz above, I ended up with this. and it worked.

function changeRandomText(e) {
    
    // const item = e.target.value;
    var something = Math.random();
    console.log(`changeRandomText clicked + ${something}`);
    setInputValue(`changeRandomText clicked + ${something}`);
    console.log(inputValue);
    startLoadingTodos();  //this specific line solved the problem.
  }

I think, it worked in my favour that I already had redux and reducers and all of that hooked up. If that was no the case, this specific solution may not have worked, I think.

Button click calls the startLoadingTodos function, which in turn calls the API and that returns data, updating the redux state, and component also updates.

Fresh Call To API EndPoint on Button Click in React JS

1 Answers1