I'm going to build a web with react js. I'm very new to react so I have a problem to make CRUD. For the first I want to display some data json to table. I have file .js that named keranjang.js. it contains jsx to display the table. and I have another named barang.js and want to fill it with the method named tampildata() used to hold json data for example {"nama_barang" : "bolu", "harga" : "10000"}. How I write the method? and how do I call the method and data to display that data into the existing table in keranjang.js? Hope everyone helps me.

I'm going to build a web with react js. I'm very new to react so I have a problem to make CRUD. For the first I want to display some data json to table. I have file .js that named keranjang.js. it contains jsx to display the table. and I have another named barang.js and want to fill it with the method named tampildata() used to hold json data for example {"nama_barang" : "bolu", "harga" : "10000"}. How I write the method? and how do I call the method and data to display that data into the existing table in keranjang.js? Hope everyone helps me.

• javascript
• json
• reactjs
• user-interface
• frontend

Share Improve this question Follow edited Dec 7, 2017 at 15:52 Eddie 26.9k66 gold badges3838 silver badges5959 bronze badges asked Dec 7, 2017 at 14:58 Riyan MaulanaRiyan Maulana 5511 silver badge55 bronze badges 3

• Can you post some code showing what you've already tried? – T Porter Commented Dec 7, 2017 at 15:18
• You are trying to access method that is present in one js file returning json and want to display that json in another js file that having table ui. Correct? – Elumalai Kaliyaperumal Commented Dec 7, 2017 at 15:25
• yes you're right bro – Riyan Maulana Commented Dec 8, 2017 at 14:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I am assuming that you trying to call external file's method in current ponent. In your barang.js file export your function that holds json data like

export function tampildata() {
    return [{ "firstname": "first", "lastname": "f"}, {"firstname": "second", "lastname": "l"}];
}

or

export default {
  tampildata() {
    return [{ "firstname": "first", "lastname": "f"}, {"firstname": "second", "lastname": "l"}];
  }
};

Then in your keranjang.js file import your tampildata method and call that method in ponentDidMount and set state like below

import React from 'react';
import ReactDOM from 'react-dom';
import { tampildata } from 'barang';

class TableComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            json: []
        }
    }

    ponentDidMount() {
        this.setState((prevState) => {
            return {
                json: tampildata()
            }
        })
    }

    render() {
        return (
            <div>
                <table>
                    <thead>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </thead>
                    <tbody>
                        {this.state.json.map((data, i) => {
                            return (
                                <tr key={i}>
                                    <td>{data.firstname}</td>
                                    <td>{data.lastname}</td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>
            </div>
        )
    }
}


ReactDOM.render(
  <TableComponent />, 
  document.getElementById("app")
);

Here is the working jsfiddle. Hope this will helps you!