i want to display in the console the object function but it displays nothing can you tell me what i did wrong?

please be kind ..i know i did something awfully wrong ,this is my first question in stackoverflow;

    
import React, { Component } from 'react';

export default class productType extends Component {
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.onChangeType = this.onChangeType.bind(this);
    this.onChangeAttribute = this.onChangeAttribute.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

  this.state= {
    type: '',
    book:'',
    size: '',
    height: '',
    width: '',
    lenght: ''

  }
}

onChangeType(e) {
  this.setState({
      type:e.target.value
  })
}

onChangeAttribute(e) {
  this.setState({
    [e.target.name]:e.target.value,
    [e.target.name]:e.target.value,
    [e.target.name]:e.target.value,
    [e.target.name]:e.target.value,
    [e.target.name]:e.target.value

  })
}

onSubmit(e) {
  e.preventDefault();

  const obj = {

    [e.target.name]:this.state.book,
    [e.target.name]:this.state.size,
    [e.target.name]:this.state.height,
    [e.target.name]:this.state.width,
    [e.target.name]:this.state.lenght
         
  }
  console.log(obj);
}

i've tried and documented everywere and still can't resolve this

renderSelectedForm(type) {
  switch(type) {
      

    case '1':
      return  <form name="form_name1" >
              <label for="fname">Weight</label>
              <input type="text" name="book"
              value={ this.state.book}
              
              onChange={this.onChangeAttribute}></input>
              </form>
  

    case '2':
      return  <form name="form_name1" id="2" >
              <label for="fname">Size(MB)</label>
              <input type="text" name="size"
              value = {this.state.size}  
              onChange={this.onChangeAttribute}></input>
              </form>;

    case '3':
      return  <form name="form_name1" id="3"  >
              <label for="height">Height</label>
              <input type="number"  name="height" required
              onChange={this.onChangeAttribute}/>

              <label for="width">Width</label>
              <input type="number"  name="width" required
              onChange={this.onChangeAttribute}/>

              <label for="length">Length</label>
              <input type="number"  name="length" required 
              onChange={this.onChangeAttribute}/>
            </form>;
      
    default:
      return null;

     
  }
}

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


  render(){
    return (
        <div>

            <form >
               <select id="type" value={this.state.selectedValue} onChange={this.handleChange}>
                   <option value="0" selected="selected">Select</option>
                   <option value="1">Book</option>
                   <option value="2">DVD</option>
                   <option value="3">Furniture</option>
               </select>
            </form>
            {this.renderSelectedForm(this.state.selectedValue)}

            <button onClick={this.onSubmit}>ADD</button>
        </div>
    )
 } 

}

P.S: this is my fist question on stackoverflow

CodePudding user response：

I don't have experience in React but I think you are calling onSubmit() method wrong. Try this:

    <button onClick={onSubmit}>ADD</button>

OR

If you want to use this then you have to modify your onSubmit() method like:

onSubmit = (e) => {
    e.preventDefault();
    
    // your code
  }

CodePudding user response：

The error is in your onSubmit function.

onSubmit(e) {
  e.preventDefault();

  const obj = {

    [e.target.name]:this.state.book,
    [e.target.name]:this.state.size,
    [e.target.name]:this.state.height,
    [e.target.name]:this.state.width,
    [e.target.name]:this.state.lenght
         
  }
  console.log(obj);
}

When you write

<button onClick={this.onSubmit}>ADD</button>

You are assigning the reference of the onSubmit function to the event handler onClick. So, when the button is pressed the onClick event handler invokes, and like any other event handler it provides you with an event object that you are taking as "e". Now, this event object was invoked by the button, i.e., the "e.target" here actually references to the button object in your DOM.

And as you haven't assigned any name prop to it.

e.target.name = null

Hence,

[e.target.name]:this.state.book

essentially means,

null: <some_value>

So, the object that you are creating basically is something like this.

{
  null: null
}

And when it console logs, probably you are seeing something like this,

{
  "": <some_value>
}

I think you are trying to see the value stored in your state after users enter anything in the form. In that case, you can simply console.log the state value.

// Change this:
console.log(obj)
// To:
console.log(this.state)

/* Or if you want to process your state and then display it then store the value in your object like this: */
const obj = { ...this.state }
// then do your stuff

Let me know if you need any more clarification.