I have a function in react that I need to pass data to, how do I pass the parameter?

Question

Somewhat new to reactjs. Using Visual Studio Code to build my UI, in reactjs. I need to pass my data to Application, is this done on this line? <Application />

I know how to pass data to other components, but now sure how it is passed to a function.

import React, { Component } from 'react';
import { Form, FormText } from 'react-bootstrap';
import Application from './CreateTable';
import fetchQuestionBankData from './RetrieveData'; 
export class CreateQuestionBank extends Component {
    static displayName = CreateQuestionBank.name;

    constructor(props) {
        super(props);
        this.state = {
            banks:[],            
            loading: true,           
            error: props.bError
        }
    }

    componentDidMount() {       
        this.setState({ banks: fetchQuestionBankData(5), loading:false }, () => { console.log("Retrieved 
       data") });
    }

   

    static renderTable() {
        return (
            <Application />                    
        );
    }

    render() {
        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : CreateQuestionBank.renderTable();
        return (
            <div>
                <Form.Group>
                    <h1>Question Bank Creator</h1>
                    <Form.Group>                      
                        <br />
                        <Form.Group className="col-md-12">
                            <FormText className="showError">{this.state.error}</FormText>
                        </Form.Group>
                    </Form.Group>
                    {contents}
                </Form.Group >
            </div>
        );
    }
}

import React from 'react';
import styled from 'styled-components'
import { useTable } from 'react-table';         

const Styles = styled.div`
  padding: 1rem;

  table {
    border-spacing: 0;
    border: 1px solid black;

    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`

This is my function Application that creates the react-table from the data, I want to pass into it.

function Table({ columns, data }) {

    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
    } = useTable({ columns, data })

    return (
        // apply the table props
        <table {...getTableProps()}>
            <thead>
                {// Loop over the header rows
                    headerGroups.map(headerGroup => (
                        // Apply the header row props
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {// Loop over the headers in each row
                                headerGroup.headers.map(column => (
                                    // Apply the header cell props
                                    <th {...column.getHeaderProps()}>
                                        {// Render the header
                                            column.render('Header')}
                                    </th>
                                ))}
                        </tr>
                    ))}
            </thead>
            {/* Apply the table body props */}
            <tbody {...getTableBodyProps()}>
                {// Loop over the table rows
                    rows.map(row => {
                        // Prepare the row for display
                        prepareRow(row)
                        return (
                            // Apply the row props
                            <tr {...row.getRowProps()}>
                                {// Loop over the rows cells
                                    row.cells.map(cell => {
                                        // Apply the cell props
                                        return (
                                            <td {...cell.getCellProps()}>
                                                {// Render the cell contents
                                                    cell.render('Cell')}
                                            </td>
                                        )
                                    })}
                            </tr>
                        )
                    })}
            </tbody>
        </table>
    )
}

function Application(data) {

    const qColumns = React.useMemo(
        () => [
            {
                Header: "Question",
                columns: [
                    {
                        Header: "Type",
                        accessor: "QuestionTypeAbbrev",
                        width: 75
                    },
                    {
                        Header: "Points",
                        accessor: "PointsAwarded",
                        width: 75
                    },
                    {
                        Header: "Question",
                        accessor: "QuestionText",
                        minWidth: 225
                    }


                ]
            }
        ],
        []
    );

  

    return (       
            <Styles>
                <Table columns={qColumns} data={data} />
            </Styles>         
    )
}
export default Application

score 1 · Answer 1 · answered May 04 '21 at 07:51

1

Application is a component and data is a prop, so this code will not work:

function Application(data) {

The correct way to pass data is the following:

function Application({data}) {

or

const Application = ({data}) => {

answered May 04 '21 at 07:51

Michael Rovinsky

6,807
7
15
30

score 1 · Answer 2 · answered May 04 '21 at 09:33

As Michael said, "Application is a component and data is a prop"

What that means is, you should modify your Application component in one of these ways:

function Application({data}) {...}

or

const Application = ({data}) => {...}

What this syntax means is you're destructuring the "props" parameter of your function, which by default would look something like this

const Application = (props) => {...}

This way you would have to write "props.data" wherever you would need to access it, but you would be able to access different props too, like the default "props.children", or any other prop you would pass to the component.

The other thing you would have to do is modify your line where you use your component

<Application data={data} />

I have a function in react that I need to pass data to, how do I pass the parameter?

2 Answers2