Ad

Use An Array Which Is Defined In Another File Using React?

- 1 answer

I have a react component that I use it in some routes. the component needs some data witch is different in routes. The component is like below:

import React from "react";

class ChangeView extends React.Component{
    render(){
        return(
            <div>
                <button type="button" className="btn open-modal" title="change view">
                    <i className="fas fa-eye"></i>
                </button>
                <div id="ms">
                    <ul>{data}</ul>
                </div>
            </div>
        )
    }
}
export default ChangeView;

and a sample route:

import React , {Component} from 'react';
import ChangeView from 'ChangeView';
class Firewall extends Component {
  render() {
    const data = [
       {name:"smith",age:20},
       {name:"nik",age:10},
       {name:"mosh",age:45}
    ];
    return(
      <ChangeView />
    )
  }
}
Ad

Answer

from the component try to pass data like this :

import React , {Component} from 'react';
import ChangeView from 'ChangeView';
class Firewall extends Component {
  render() {
    const data = [
       {name:"smith",age:20},
       {name:"nik",age:10},
       {name:"mosh",age:45}
    ];
    return(
      <ChangeView data={data} />
    )
  }
}

and in the child ChangeView component access it using

props.data //functional components

or

 this.props.data //class components
Ad
source: stackoverflow.com
Ad