Console.log data entered in a form with React js

Question

I'm trying to enter data through a form using React JS but it's not working.

I have a Partner model which has a name and a logo. I created a form to enter the partner's name and its logo image.

This is the AddPartnerForm.js file:

import React, { Component } from 'react';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Skeleton from '@material-ui/lab/Skeleton';
import axios, { post } from 'axios';


export default class AddPartnerForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newPartnerData: {
        partnerlogo: '',
        partnername: ''
      },
      partnerlogouploaded: false
    }
    this.onChange = this.onChange.bind(this)
    this.onUpload = this.onUpload.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

onChange(e) {
     this.setState({
       newPartnerData: {
        [e.target.name]: e.target.result
       }
     });
}

onUpload(e) {
    let file= e.target.files[0];
    this.setState({
          newPartnerData: {
          partnerlogo: file,
        }
    }); 
    this.setState({ partnerlogouploaded: true });
  }

handleSubmit(e){
  e.preventDefault()
  console.log(this.state.newPartnerData)
}

render() {
    let partnerlogo;
    if (partnerlogouploaded) {
      partnerlogo = <img style={{ width: 200, height: 200 }} src={this.state.partnerlogo} />;
    } else {
      partnerlogo = <Skeleton variant="rect" width={200} height={200} />;
    }
  return (
      <form>
        <TextField
          name="partnername"
          autoFocus
          margin="dense"
          id="name"
          label="Partner's name"
          type="text"
          fullWidth
          onChange={this.onChange}
        />
        <input accept="image/*"
          style={{ display: 'none' }}
          id="contained-button-partner-logo"
          name="partnerlogo"
          multiple
          type="file"
          diplay="none"
          onChange={this.onUpload} />

        <label htmlFor="contained-button-partner-logo" className="upload-button">
          <Button variant="contained" color="primary" component="span" >
            Upload Partner Logo
          </Button>
        </label>

        <Box width={200} height={200} marginRight={0.5} my={5}>
         {partnerlogo}
        </Box>

        <Button type="submit" onClick={this.handleSubmit} variant="contained" color="primary" component="span" >
            Add
        </Button>
      </form>
    )
  }
}

When I enter just the name of the partner in the form (without uploading the image) I get this response : {partnername: undefined}

And when I upload the image and enter the partner's name, I get this response: {partnerlogo: File} (I get just the image that I uploaded)

Answer 1

Change e.target.result to e.target.value

onChange(e) {
         this.setState({
           newPartnerData: {
            [e.target.name]: e.target.value
           }
         });
    }


onUpload(e) {
    let file= e.target.files[0];
    this.setState(prev => ({
      ...prev,
      newPartnerData: {
      ...prev.newPartnerData,
      partnerlogo: file,
    },
    partnerlogouploaded: true
    })); 
  }