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
– rahuuzz, Commented Mar 18, 2022 at 7:46
Yes, that worked!! I will update it as an answer below. just in case, others come looking. thank you. — Jay
– Jay, Commented Mar 18, 2022 at 11:20

Jay · Accepted Answer · 2022-03-18 11:24:49Z

0

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.

answered Mar 18, 2022 at 11:24

Jay

3,0905 gold badges39 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fresh Call To API EndPoint on Button Click in React JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related