How to return from class json array reactjs

Question

Hi i have this code that fetch and returns json data from file config.json

text.js

 class Text extends React.Component {
     constructor(props){
        super(props)
        this.state = {
          datat: [],
        };
      }
      componentDidMount(){
         fetch('/config.json')
          .then(response => response.json())
          .then((datao) =>{        
            this.setState({
                datat: (JSON.parse(JSON.stringify(datao)))
            })

          });
       }
      render(){
         const datatorender = this.state.datat;
    return ( Object.keys(datatorender).map(key =>{if(key==this.props.value){return datatorender[this.props.value]}}))
        }}

and how i call it in home is like : home.js

<Text value="SITENAME">

so i want to call it like this : {text.SITENAME} instead of fist one how can i do that ?

and this is the json file :

{
  "SITENAME": "site name",
  "SITE_DESCRIPTION":"desc"
}

What I understand is you want to access the fetched value "site name" in the parent component of home.js by calling something like {text.SITENAME}, right? — Faisal Rahman Avash
– Faisal Rahman Avash, Commented May 13, 2019 at 3:58
I don't think you can do that. The closest way to imitate this behavior is by keeping the state in the parent component and passing a callback as prop to Text component so that the parent state can be updated with that callback. Are you familiar with this approach? — Faisal Rahman Avash
– Faisal Rahman Avash, Commented May 13, 2019 at 18:42

Vikash_Singh · Accepted Answer · 2019-05-14 07:01:15Z

Try this:

class Text extends React.Component {
     constructor(props){
        super(props)
        this.props = props;
        this.state = {
          datat: [],
        };
      }
      componentDidMount(){
         fetch('/config.json')
          .then(response => response.json())
          .then((datao) =>{        
            this.setState({
                datat: (JSON.parse(JSON.stringify(datao)))
            })

          });
       }
      render() {
          const datatorender = this.state.datat;
          console.log(datatorender)
          return (
            <div>
              {
                Object.keys(datatorender).map((key, i) => {
                  if (key === this.props.value) {
                    return (
                      <li key={i}> {datatorender[this.props.value]} </li>
                    )
                  } else {
                    return null
                  }
                })
              }
            </div>
          )
      }
}

Faisal Rahman Avash · Accepted Answer · 2019-05-14 06:16:02Z

Here's how you do it:

// FILE: home.js
class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      datat: [],
    };
  }
  render() {
    return 
    <div>
      {this.state.datat.SITENAME === undefined ? null : this.state.datat.SITENAME} // Just like you wanted to access
      <Text value="SITENAME"
            datat={this.state.datat}
            updateDatat={(val) => this.setState({datat: val})}/>
    </div>
  }
}

// FILE: text.js 
class Text extends React.Component {
  componentDidMount() {
    fetch('/config.json')
      .then(response => response.json())
      .then((datao) => {
        this.props.updateDatat({
          JSON.parse(JSON.stringify(datao))
        })
      });
  }
  render() {
    const datatorender = this.props.datat;
    return (Object.keys(datatorender).map(key => {
      if (key == this.props.value) {
        return datatorender[this.props.value]
      }
    }))
  }
}

Collectives™ on Stack Overflow

How to return from class json array reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related