How to print a Django List on react js frontend

Question

I have a list as follows:

["test1","test2","test3","test4"]

I have the following serializer class:

class ListSerializer(serializers.Serializer):
    key=serializers.ListField()

This is views.py file:

class ListView(APIView):
    def get(self, request,*args, **kwargs):
        serializer_class = ListSerializer
        #print("The serializer is:",serializer_class)
        #print(printList())
        return Response({"keywords":printList()})

Under the frontend,I have the following method for API:

 static listFormUser() {
    const TOKEN = getItem("accessToken");
    return axios({
      method: "get",
      url: `${BASE_URL}/api/listtopics/`,
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        Authorization: `Token ${TOKEN}`,
      },
    }).then((res) => res);
  }
}

Following is my React class code for displaying the list

class printForm extends Component {
  constructor(props){
    super(props);
    this.state={
      items:[],
      isLoaded:false,
      key:"",
    }
  }
componentDidMount(){
    this.setState({ isLoding: true }, () => {
      RestAPI.listForm()
        .then((response) => {
          let keywordArray = [];
          for (let i = 0; i <= response.data.length; i++) {
            keywordArray.push({
              text: response.data[i].key,
              
              
            });
          }
          if (response.data.length === 0) {
            this.setState({
              isData: false,
            });
          }
          this.setState({
            isLoding: false,
            items: keywordArray,
          });
        })
        .catch((error) => {
          this.setState({ isLoding: false });
          handleServerErrors(error, toast.error);
        });
    });
  }
render(){
   return(<ListGroup>
      <ListGroupItem>Cras justo odio</ListGroupItem>
      <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
      <ListGroupItem>Morbi leo risus</ListGroupItem>
      <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
      <ListGroupItem>
      {items.map(item => {
              return <li>{items[0]}</li>;
            })}
      </ListGroupItem>
    </ListGroup>
)
}

The list is not printed.What could be the error here? I have tried many ways but none of them work

score 0 · Answer 1 · answered Nov 20 '20 at 08:59

In the ListView you return the JSON with a list (the serializer is not needed).

def printList():
    return ["test1","test2","test3","test4"]

class ListView(APIView):
    def get(self, request,*args, **kwargs):
        return Response({"keywords":printList()})

On React side access the list:

          let keywordArray = [];
          for (let i = 0; i < response.data["keywords].length; i++) {
            keywordArray.push({
              text: response.data["keywords"][i],
            });
          }

As you can see you need to access the list by setting "keywords" in response.data.

Here is a good tutorial on how to make CRUD in Django+React.

How to print a Django List on react js frontend

1 Answers1