0

The code is related to singly linked list,I am trying to display a value of a singly linked list using map function and state in react js.

the function logic() is to update state when display button clicks,all values in linked list is stored in an array, it update state listdata but the problems is when display button clicks then map function is not called....

to solve above issue please suggest some idea,tips about it....

The code is :-

import { useState } from "react"
import { Container } from "react-bootstrap"
import "./css/style.css"

const logic = (start) => {
    let temp = start.props
    let arr = []
    let k = 0
    while(temp.ptr!=null) {
        arr[k] = temp.n
        k++
        temp=temp.ptr
    }
    arr[k]=temp.n
    return arr
}

const SDisplay = (start,setdisp) => {
    const [ listdata,setlistdata ] = useState([])

    return (
        <>
            <Container>
                <input type="button" onClick={()=>{setlistdata([...logic(start)])}} value="Display"></input>
                {
                    listdata.map((i)=>{
                        <div className="d-flex align-items-center">
                            <div className="box">{i}</div>
                            <div className="arrow"></div>
                        </div>
                   })
                }
                <a href="#" onClick={()=>{setdisp.display(false)}} className="text-decoration-none text-dark">Back</a>
            </Container>
        </>
    )
}

export default SDisplay
Om Query
  • 1
  • 1
  • 2
    Does this answer your question? [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions) – David Nov 21 '22 at 15:03
  • 1
    This is effectively a typo. The callback function you're providing to `.map()` doesn't return anything. – David Nov 21 '22 at 15:03

1 Answers1

0

You need to return something while using map() as below:

listdata.map((i)=>{
  return (
      <div className="d-flex align-items-center">
       <div className="box">{i}</div>
       <div className="arrow"></div>
      </div>
    )
 })

Or you can do as below: // if you do not want to use return keyword just wrap the component with circle () parenthesis inside of curly {}.

 listdata.map((i)=>(
   <div className="d-flex align-items-center">
     <div className="box">{i}</div>
     <div className="arrow"></div>
   </div>
 ))
Sujit Libi
  • 386
  • 1
  • 4
  • 16
  • Hello sujit libi,I am om,I am a full stack js developer, I thankful to you that you help me to solve my problem and I wish that if any problem come then I ask question you help me, but I has just posted another question, please help me to solve that..! – Om Query Nov 23 '22 at 14:27
  • Glad it really helps you. In upcoming days I will try my best to help you. :) Would love if you could upvote :) can. you share me another question link as well :) – Sujit Libi Nov 23 '22 at 14:31