display data based on number of array

Question

I have data that push to a state named value. and i want to display them based on number of array. i'm trying to make initiate but not work.

constructor(props) {
    super(props)
    this.state = {
        json: [],
        search: '',
        value: [],
        jumlah : "",
        nama_barang : "Bolu kuwuk",
        harga : 10000
    }

}

i push jumlah, nama_barang and harga into value [] like this

 handleSubmit(e){
    e.preventDefault();
    alert("Data Telah diinputkan!");
    this.state.value.push(
        this.state.jumlah,
        this.state.nama_barang,
        this.state.harga
    )
    this.setState(
         this.state
    )
    console.log(this.state.value)

}

and display them like this

{this.state.value.map((v, i) => {
      return <div key={i}>
            <h1>{v.jumlah}</h1>
            <h1>{v.nama_barang}</h1>
            <h1>{v.harga}</h1>

      </div>

    })}

it works when i write {v} but it print whole array. i just want display it by number of array

1. Don't push state members into other state members. 2. `this.setState({this.state})` has no effect other than re-rendering 3. you have to use `this.state.value[i]` — , Jan 08 '18 at 00:22
I'm not sure what exactly you're trying to do. Using `{v}` will display the entire array, yes. Do you just want specific members? In that case you have to get rid of `map()`. — , Jan 08 '18 at 00:38
yes, i want display it by specific object. 1. jumlah 2.nama_barang 3.harga — Riyan Maulana, Jan 08 '18 at 00:51

score 0 · Answer 1 · answered Jan 08 '18 at 00:33

When you push into your array, you are adding 3 new elements to that array as opposed to one object that contains jumlah, nama_barang, and harga.

What you should be doing is:

this.state.value.push({
   jumlah: this.state.jumlah,
   nama_barang: this.state.nama_barang,
   harga: this.state.harga, 
});

This will make it work as expected, but you are mutating state and setting setState to this.state -- these 2 things are against best practice.

Try this instead:

this.setState((prevState) => {
    return {
        value: prevState.value.concat([{
            jumlah: this.state.jumlah,
            nama_barang: this.state.nama_barang,
            harga: this.state.harga, 
        }])
    }
});

In the code above we are not mutating the existing state object, and we are using an updater callback in setState that contains a reference to our previous state (the rule is that we should use the updater syntax whenever our new state depends on our previous state)

ok, i understand. it works. I have 1 question beyond the question above. if i want to display that data array (jumlah, nama_barang, harga) into another component in another .js file. is that possible? how is the simple way? — Riyan Maulana, Jan 08 '18 at 01:07
It is possible. The approach will depend on how your components relate to each other (parent-child, sibling-sibling, etc.). For an in-depth answer take a look at https://stackoverflow.com/questions/21285923/reactjs-two-components-communicating — Christian Santos, Jan 08 '18 at 02:13

display data based on number of array

1 Answers1