Load form value from state

Question

First I show a list of transactions, when a user selects a single transaction a new page is opened with the transaction ID in the URL. On this page are details of the transaction displayed. The code below is just the details page. It shows all the right details.

One of the details is a list of 0 or more tags, I'd like to be able to edit the list of tags and save the result. At this point, I always end up with a clean Input field and I do not understand how to populate this field with the existing transaction['tags'] data.

It seems that the transaction['tags'] is not initialized until the page is rendered, I cannot use it in the constructor or in the componentDidMount.

What I expect is that the transaction object as stated in the mapStateToProps is available and I can change the line in the constructor from: this.state = {value: ''}; to this.state = {value: transaction['tags']}

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchTransaction } from '../actions';

class TransactionsIndex extends Component {
    constructor(props) {
        super(props);
        this.state = {value: ''};
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentDidMount() {
        const { _key } = this.props.match.params;
        this.props.fetchTransaction(_key);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    }

    render() {
        const { transaction } = this.props;

        if (!transaction) {
            return <div>Loading...</div>;
        }

        let tags = null;

        tags =
            <div>
                <form onSubmit={this.handleSaveTagsclick}>
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                    <input type="submit" value="Submit" />
                </form>
            </div>

        // console.log(transaction['tags']);

        return (
            <div className="container">
                <div className="well">
                    <div>Transactiedatum: { transaction["Transactiedatum"] }</div>
                    <div>Valutacode: { transaction["Valutacode"] }</div>
                    <div>CreditDebet: { transaction["CreditDebet"] }</div>
                    <div>Bedrag: { transaction["Bedrag"] }</div>
                    <div>Tegenrekeningnummer: { transaction["Tegenrekeningnummer"] }</div>
                    <div>Tegenrekeninghouder: { transaction["Tegenrekeninghouder"] }</div>
                    <div>Valutadatum: { transaction["Valutadatum"] }</div>
                    <div>Betaalwijze: { transaction["Betaalwijze"] }</div>
                    <div>Omschrijving: { transaction["Omschrijving"] }</div>
                    <div>Type betaling: { transaction["Type betaling"] }</div>
                    <div>Machtigingsnummer: { transaction["Machtigingsnummer"] }</div>
                    <div>Incassant ID: { transaction["Incassant ID"] }</div>
                    <div>Adres: { transaction["Adres"] }</div>
                    <div>Status: { transaction["status"] }</div>
                    <div>Created: { transaction["created"] }</div>
                    {tags}
                </div>
                <Link to="/"><button type="button" className="btn btn-default">Back</button></Link>
            </div>
        );
    };
}

function mapStateToProps({ transactions }) {
    // console.log('transactions_selectedTransaction: ' + transactions['selectedTransaction']);
    return { transaction: transactions['selectedTransaction'] };
 }

export default connect(mapStateToProps, { fetchTransaction })(TransactionsIndex);

I found this but it did not help me: Redux-form: Set form values from state and this: How to get state / value from form component?