bo/src/Vegetable/Main.js

import React, {
  Component,
} from 'react';
import {
  Row,
  Col,
  FormGroup,
  Label,
  Input,
} from 'reactstrap';
import {
  FaFileImage,
} from 'react-icons/fa';
import VegetablesProperties from './Properties'

class VegetableMain extends Component {
  constructor(props) {
    super(props);

    this.state = {
      Vegetable: {
        name: '',
        lat: 0,
        lng: 0,
        description: '',
        Pictures: [],
      },
      imagePreviewUrl: '',
      availableProperties: []
    };

    this.handleChange = this.handleChange.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.Vegetable) {
      this.setState({
        Vegetable: nextProps.Vegetable
      });
    }
    if (nextProps.imagePreviewUrl) {
      this.setState({
        imagePreviewUrl: nextProps.imagePreviewUrl
      });
    }
    if (nextProps.availableProperties) {
      this.setState({
        availableProperties: nextProps.availableProperties
      });
    }
  }

  handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState(prevState => ({
      Vegetable: {
        ...prevState.Vegetable,
        [name]: value,
      },
    }));

    this.props.updateValue(name, value)
  }

  onImageChange(e) {
    e.preventDefault();

    const reader = new FileReader();
    const file = e.target.files[0];

    reader.onloadend = () => {
      this.props.changeMainPicture(file, reader);
    };

    reader.readAsDataURL(file);
  }

  render() {
    const {
      imagePreviewUrl,
    } = this.state;

    let $imagePreview = null;
    if (imagePreviewUrl) {
      $imagePreview = (<img src={imagePreviewUrl} alt="Preview" />);
    } else if (this.state.Vegetable.mainPicture) {
      $imagePreview = (<img src={this.state.Vegetable.mainPicture} alt="Preview" />);
    } else {
      $imagePreview = (<div className="previewText" />);
    }

    return (
      <Row>
        <Col xs={12} sm={4}>
          <FormGroup row>
            <Label for="name" sm={4}>Nom</Label>
            <Col sm={8}>
              <Input
                type="text"
                name="name"
                id="name"
                value={this.state.Vegetable.name}
                placeholder="Nom"
                onChange={this.handleChange}
              />
            </Col>
          </FormGroup>
          <FormGroup row>
            <Label for="description" sm={4}>Description</Label>
            <Col sm={8}>
              <Input
                type="textarea"
                name="description"
                id="description"
                value={this.state.Vegetable.description}
                placeholder="Description"
                onChange={this.handleChange}
              />
            </Col>
          </FormGroup>
          <FormGroup row>
            <Label for="mainPicture" sm={4}>Photo principale</Label>
            <Col sm={8}>
              <Label className="mainPictureButton btn btn-success" for="mainPicture" sm={12}>
                <FaFileImage />
              </Label>
              <Input
                type="file"
                id="mainPicture"
                onChange={e => this.onImageChange(e)}
              />
            </Col>
          </FormGroup>

          <VegetablesProperties
            selectedProperties={this.state.Vegetable.Properties}
            availableProperties={this.state.availableProperties}
            setProperties={this.handleChange}
          />
        </Col>
        <Col xs={12} sm={8}>
          <div className="imgPreview">
            {$imagePreview}
          </div>
        </Col>
      </Row>
    );
  }
}

export default VegetableMain;