Source: AreasList.js

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Cookies from 'universal-cookie';
import getTranslation from '../../i18n/'
import PropTypes from 'prop-types';
const Fragment = React.Fragment;

const cookies = new Cookies();

class AreasList extends Component {

    constructor(props) {
        super(props);
        this.state= {
            activeArea: 0,
            excel_identifier: '',
            uri: '',
            ne_corner: '',
            sw_corner: '',
            contact_details: '',
            description_en: '',
            description_de: '',
            description_cs: '',
            description_pl: '',
            description_sk: '',
            description_sl: ''
        }

    }

    changeActiveArea(area) {
        let selectedArea = this.props.pilotareas.filter(pilotarea => pilotarea.id === area)[0];
        this.setState({
            activeArea: area,
            excel_identifier: selectedArea.excel_identifier,
            uri: selectedArea.uri,
            ne_corner: selectedArea.ne_corner,
            sw_corner: selectedArea.sw_corner,
            contact_details: selectedArea.contact_details,
            description_en: selectedArea.description_en,
            description_de: selectedArea.description_de,
            description_cs: selectedArea.description_cs,
            description_pl: selectedArea.description_pl,
            description_sk: selectedArea.description_sk,
            description_sl: selectedArea.description_sl
        })
    }

    /**
    * Updates the form state on change
    *@param {event} event - The change event for the active input
    */
    changeField(event) {
      this.setState({ [event.target.name] : event.target.value})
    }

    /**
     * Saves a changed pilotarea to the database by calling
     * the updateArea action which connects with the backend
     */
    saveArea() {
        /* Get the token of the Superuser from the cookie for authorization */
        let token = cookies.get('token');
        this.props.updateArea(this.state.activeArea, this.state.contact_details,this.state.excel_identifier, this.state.uri, this.state.ne_corner, this.state.sw_corner, this.state.description_en, this.state.description_de, this.state.description_cs, this.state.description_pl, this.state.description_sk, this.state.description_sl, token)
    }

    /**
     * Uploads the pilotarea outlines to the geoserver
     * to display them in the web GIS via the uploadAreas action
     */
    uploadAreas() {
      /* Get token for authorization of Superuser */
      let token = cookies.get('token');
      /* Call uploadAreas action via props (SuperuserContainer > Superuser > AreasList) */
      this.props.uploadAreas(token);
    }

    render() {

        let areas = this.props.pilotareas;


        return(
            <div>
                <Link to="/experts/superuser/area"><button className="btn btn-green">Add a area</button></Link><br /><br />
                <button onClick={() => this.uploadAreas()} className="btn btn-green">Update pilot area outlines</button>

                    <table cellSpacing="0" className="superuser-table">
                        <tbody>
                            {areas.map((area, index) =>
                                <Fragment key={area.id}>
                                <tr className={(area.id === this.state.activeArea ? 'highlighted-row' : 'not-highlighted')} key={area.id}>
                                    <td onClick={() => this.changeActiveArea(area.id)}>{getTranslation(area.name)}</td>

                                </tr>
                                {area.id === this.state.activeArea &&
                                <tr className="highlighted-row">
                                    <td>
                                        <div className="form-group">
                                            <label>Area ID:</label>
                                            <input onChange={(event) => this.changeField(event)} type="text" name="excel_identifier" value={this.state.excel_identifier} />
                                        </div>
                                        <div className="form-group">
                                            <label>URI string:</label>
                                            <input onChange={(event) => this.changeField(event)} type="text" name="uri" value={this.state.uri} />
                                        </div>
                                        <div className="form-group">
                                            <label>NE corner:</label>
                                            <input onChange={(event) => this.changeField(event)} type="text" name="ne_corner" value={this.state.ne_corner} />
                                        </div>
                                        <div className="form-group">
                                            <label>SW corner:</label>
                                            <input onChange={(event) => this.changeField(event)} type="text" name="sw_corner" value={this.state.sw_corner} />
                                        </div>
                                        <div className="form-group">
                                            <label>Contact details:</label>
                                            <textarea rows="5" onChange={(event) => this.changeField(event)} type="text" name="contact_details" value={this.state.contact_details}>
                                            </textarea>
                                        </div>
                                        <div className="form-group">
                                            <label>Description EN:</label>
                                            <textarea rows="5" onChange={(event) => this.changeField(event)} type="text" name="description_en" value={this.state.description_en}>
                                            </textarea>
                                        </div>
                                        <div className="form-group">
                                            <label>Description DE:</label>
                                            <textarea rows="5" onChange={(event) => this.changeField(event)} type="text" name="description_de" value={this.state.description_de}>
                                            </textarea>
                                        </div>
                                        <div className="form-group">
                                            <label>Description CZ:</label>
                                            <textarea rows="5" onChange={(event) => this.changeField(event)} type="text" name="description_cs" value={this.state.description_cs}>
                                            </textarea>
                                        </div>
                                        <div className="form-group">
                                            <label>Description PL:</label>
                                            <textarea rows="5" onChange={(event) => this.changeField(event)} type="text" name="description_pl" value={this.state.description_pl}>
                                            </textarea>
                                        </div>
                                        <div className="form-group">
                                            <label>Description SK:</label>
                                            <textarea rows="5" onChange={(event) => this.changeField(event)} type="text" name="description_sk" value={this.state.description_sk}>
                                            </textarea>
                                        </div>
                                        <div className="form-group">
                                            <label>Description SL:</label>
                                            <textarea rows="5" onChange={(event) => this.changeField(event)} type="text" name="description_sl" value={this.state.description_sl}>
                                            </textarea>
                                        </div>
                                        <div className="form-group">
                                            <button onClick={() => this.saveArea()} className="btn btn-green" type="submit">Save</button>
                                        </div>
                                    </td>
                                </tr>
                                }
                                </Fragment>
                            )}
                        </tbody>

                    </table>   
                </div>
      )
    }
}


export default AreasList