From mapStateToProps to setState

Question

Is it possible to set the properties from mapStateToProps and use setState to change the state and save that information to my database? The data is being returned from google books api and I want to save a small portion of the data.

My state:

state = {
    title: '',
    subtitle: '',
    authors: '',
    description: '',
    thumbnail: '',
    buyLink: ''
};

Function to setState and save to database

let { book } = this.props.book;

    let bookInfo;

    if (book !== null) {
        const onSave = (e) => {
            e.preventDefault();
        let savedData = this.setState({
                title: book.volumeInfo.title,
                subtitle: book.volumeInfo.subtitle,
                authors: book.volumeInfo.authors,
                description: book.volumeInfo.description,
                thumbnail: book.volumeInfo.imageLinks.thumbnail,
                buyLink: book.saleInfo.buyLink
            });
            console.log(savedData);
        };
        // this.props.saveBook(savedData, this.props.history);
        bookInfo = <BookInfo book={book} onClick={onSave} />;
    }

savedData returns undefined

const mapStateToProps = (state) => ({
  book: state.books
 });

Because `this.setState()` doesn't return anything. Whatever you want to take from it - you won't, because setState() won't give it to you :) — Al.G., Jul 26 '18 at 16:37

score 3 · Accepted Answer · answered Jul 26 '18 at 16:51

In order to save something to a database, you don't need to call setState() at all. State and Props are just mechanisms used by React to manage data and interactions with the data (this is an overly gross simplification).

looking at your code, you just need to convert your book object to a smaller/different format.

saveData = () => {
    // The code below just shows intention and shouldn't be used as is.
    let book = this.props.book
    let bookToSave = {
            title: book.volumeInfo.title,
            subtitle: book.volumeInfo.subtitle,
            authors: book.volumeInfo.authors,
            description: book.volumeInfo.description,
            thumbnail: book.volumeInfo.imageLinks.thumbnail,
            buyLink: book.saleInfo.buyLink
        }
    this.props.save(bookToSave, this.props.history);
}
render() {
    <BookInfo book={this.props.book} onSave={this.saveData} />
}

My understanding of your flow seems to be:

you call an API which gives you a lot of data
you show this data on the screen
you allow a user to save it

Based on the above, I do not see any need for you to copy the book into a state.

score 2 · Answer 2 · edited Jul 26 '18 at 16:57

if you want to log savedData you need to use the setState callback like this :

 this.setState({
                title: book.volumeInfo.title,
                subtitle: book.volumeInfo.subtitle,
                authors: book.volumeInfo.authors,
                description: book.volumeInfo.description,
                thumbnail: book.volumeInfo.imageLinks.thumbnail,
                buyLink: book.saleInfo.buyLink
            }, ()=>{
                  console.log(this.state)
                 this.props.saveBook(this.state, this.props.history);
               });

From mapStateToProps to setState

2 Answers2