React js render functional html with json response

Question

i have created dropdown component like

  const CONTACTS_LIST = () => (

    <select>
    {
    list_data &&
    list_data .map((h, i) => 
    (
    <option key={i} value={h.list_id}>{h.name}</option>))
    }
    </select>

  );

can it be possible to render html with json response like this ?. i can set reponse in constants using setstate . but just wanted to know that is it also possible ?

    const CONTACTS_LIST = () => (

      fetch(URL)
      .then(response => response.json())
      .then(json => {
      (
        render '
        (   <select>
        {
        json &&
        json.map((h, i) => 
        (
        <option key={i} value={h.list_id}>{h.name}</option>))
        }
        </select>
        )

        )
    );

please suggest

Please format your code and be clear about what you are asking; it will help us understand your question and what you've tried. Your second snippet doesn't have valid syntax, and your third snippet is incomplete. — kpwahn
– kpwahn, Commented Nov 9, 2019 at 1:32
i am asking that can component html can be render with json reponse ? — Neeraj Verma
– Neeraj Verma, Commented Nov 9, 2019 at 1:38

Jorge Martínez · Accepted Answer · 2019-11-11 04:54:02Z

1

Asynchronous requests are recommended to be made within the componentDidMount method, with the data you get from the api update the status of the component, when updating the status the component will be re-rendered and it will be verified if it has elements, if it has then the options of the . I hope it helps you.

class MyComponent{
  constructor () {
    super();

    this.state = {
      list_data: []
    };
  }

  componentDidMount () {
    const URL = "";
    fetch(URL).then(response => response.json())
      .then(json => {
        this.setState({
          list_data: json
        });
      });
  }

  render () {
    return (
      <select>
        {
          list_data.length === 0
            ? <option value="">Waiting moment</option>
            : list_data.map(({ h, i }) => (
              <option key={i} value={h.list_id}>{h.name}</option>
            ))
        }
      </select>
    )
  }
}

if you are using react 16 you can use the Hooks, useState and useEffect, try it this way

import React, { useEffect, useState } from 'react';

function myComponent () {
  const [list_data, set_list_data] = useState([]);

  useEffect(() => {
    const URL = "";
    fetch(URL).then(response => response.json())
      .then(json => {
        set_list_data(json);
      });
  }, []);

  return (
    <select>
      {
          list_data.length === 0
            ? <option value="">Waiting moment</option>
            : list_data.map(({ h, i }) => (
              <option key={i} value={h.list_id}>{h.name}</option>
            ))
        }
    </select>
  );
}

Hook feature reactjs

edited Nov 11, 2019 at 4:54

answered Nov 9, 2019 at 2:10

Jorge Martínez

1563 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jorge Martínez Over a year ago

you need the component with cycle so you can get asynchronous data, the life cycle is obtained by inheriting the Component class. Depending on the React version you can use the Hooks that are used to create component functions with asynchronous data. what version of react are you using @NeerajVerma .

HMR Over a year ago

@JorgeMartinezJimenez You have a syntax error: [''] should be []. You are passing no dependencies to the effect. You should also check if the component is still [mounted[(github.com/jmlweb/isMounted) before setting state.

freakomonk · Accepted Answer · 2019-11-11 05:00:51Z

0

You can pass the json response as a prop to the component to be rendered.

fetch(URL)
      .then(response => response.json())
      .then(
          <Component data={response} />
      )

Having html code in the then block kind of defeats React's purpose.

answered Nov 11, 2019 at 5:00

freakomonk

6141 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

React js render functional html with json response

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related