How to use react faq component with data from API

Question

I'm using this component in my React Js web application: https://www.npmjs.com/package/react-faq-component.

const data = {
    title: "FAQ (How it works)",
    rows: [
        {
            title: "Lorem ipsum",
            content: "Dolor sit amet",
        },
    ],
};

I need to populate "rows:" with data retrieved by my API.

This is my code:

class Faqs extends Component {
  constructor() {
    super()
    this.state = {
      faqs: []
    }
  }

  componentDidMount() {
    let category = 'caategory1';
    axios.get('https://myurl/api/faqs/'+category).then(response => {
      this.setState({
        faqs: response.data
      })
    })
  }

  render () {
    const { faqs } = this.state;
    const styles = {
      titleTextColor: "black",
      rowTitleColor: "black",
      rowContentColor: 'grey',
    }
    const config = {
      animate: true,
    }

    let data = {
      title: 'FAQS (How it works)',
      rows: [
        // Here is where I'm trying to print the json data from the API
        faqs.map(
            (faq, index) => {
                return (
                    `{title: ${faq.title}, content: ${faq.content}},`
                )
            }
        )
      ]
    }
}

I guess it's something about escaping but I'm a very beginner with React, so if anybody could help, I'd really appreciate it.

Thanks!

score 0 · Answer 1 · answered Sep 29 '20 at 16:50

Your render statement never returns. Also, you never import the FAQ component you say you are attempting to use. Finally, you probably need to stabilize the value of "this"

All together, the code would be something like this (haven't tested it):

import React, { Component } from "react";
import Faq from "react-faq-component";
import axios from 'axios';

const styles = {titleTextColor: "blue", rowTitleColor: "blue"};
const config = {};

export default class App extends Component {
  constructor() {
    super()
    this.state = {
        faqs: []
    }
  }

  componentDidMount() {
    let category = 'caategory1';
    let me = this;
    axios.get('https://myurl/api/faqs/'+category).then(response => {
      //Using "me" because I think "this" refers to the axios object
      me.setState({
          faqs: response.data
      })
    })
  }
  render() {
    return (
        <div>
            <Faq data={this.state.faqs} styles={styles} config={config} />
        </div>
    );
  }
}

No my friend, "rows:" needs to be populated like this: rows: [ { title: "Lorem ipsum", content: "Dolor sit amet", }, ]. I've just posted a part of the code, but of course I've imported axios and the faq component. — Escudo Bravo, Sep 30 '20 at 07:16

How to use react faq component with data from API

1 Answers1