CODEWITHSUNDEEP
javascriptreactjsapi
Ujjaval Gamit
Ujjaval Gamit

Reputation: 39

Data comes into console but does not show in application

import React from 'react'
const Question_Answer_model = (props) => {
  console.log(props.data)
  const newvar = props.data.map((item) => {
    return (
      <li>{item.question_text}</li>
    )
  })
  return (
    <div>
      <div>
        <h2>Question And Answers...</h2>
        {newvar}
      </div>
    </div>
  )
}
export default Question_Answer_model

this is my consoledata which shows in console here all comes into array in console

Upvotes: 1

Views: 70

Answers (2)

Patel Neel
Patel Neel

Reputation: 90

  • I think this will help you
import React from 'react'
const Question_Answer_model = (props) => {
  //console.log(props)
  const newvar = props.data.map((item) => {
    return (
        <li>{item.data.question_text}</li>
    )
  })
  return (
    <div>
      <div>
        <h2></h2>
        {newvar}
      </div>
    </div>
  )
}
export default Question_Answer_model

Upvotes: 1

Shailendra Kanherkar
Shailendra Kanherkar

Reputation: 99

const newvar = props.data.map((item) => {
return (
  <li>{item.question_text}</li>
)

})

This should be wrapped inside useCallback/useMemo/memberFunction.

It is not displaying because it is rendering for the first time and rendering when you get data.

Solved E.g

const { data } = props;
const newvar = useCallback(() => {
data.map((item) => {
    return (
      <li>{item.question_text}</li>
    )
  })
}, [data ])

use newvar inside return

Upvotes: 0

Related Questions