How to fix mapping error "Cannot destructure property 'Title' of 'fac' as it is undefined." in React JS

Question

I'm trying to use react-bootstrap mapping for my component but I get this error

Cannot destructure property 'Title' of 'fac' as it is undefined.

I think something is wrong when I try to destruct the props but I don't know which part should I fix and how to fix it. Does anyone know how to solve this problem ? Thanks in advance

Here's my code:

const facsInfo = [
    {
        Id: "1",
        Title: "De'Spa",
        Description: "dasda",
        upperleftimg:"./Images/photo1.png",
        upperrightimg:"./Images/photo2.png",
        bottomleftimg:"",
        bottomrightimg:"",
    },
    {
        Id: "2",
        Title: "De'Resto",
        Description: "dsada",
        upperleftimg:"./Images/photo3.png",
        upperrightimg:"./Images/photo4.png",
        bottomleftimg:"dasdas",
        bottomrightimg:"",
    },
]

const Facilities = () => {
    const [currentId, setCurrentId] = useState();

    useEffect(() => {
      console.log(currentId);
    }, [currentId]);
  
    const showSelectedFact = () => {
      var fac = facsInfo.filter((x) => x.Id === currentId)[0];
      const { Title, Description, Id } = fac;
      return (
        <div key={Id}>
          <h1>{Title}</h1>
          <h5>{Description}</h5>
        </div>
      );
    };

    return (
        <>
            <Container fluid>
                <Row className="facsHeader">
                    <Col lg={12} >
                        <h1>Facilities</h1>
                        <hr style={{border:'2px solid', color:'#967A50', width:'21.2%'}}></hr>
                    </Col>
                </Row>
            </Container>

            <Container fluid>
                <Row className="facsbuttwrapper text-center">
                    <Col sm={4} lg={4}>
                        <button
                        value="1"
                        className="facsButton"
                        onClick={(e) => setCurrentId(e.target.value)}
                        >
                        De'Spa
                        </button>
                    </Col>

                    <Col sm={4} lg={4}>
                        <button
                        value="2"
                        className="facsButton"
                        onClick={(e) => setCurrentId(e.target.value)}
                        >
                        De'Resto
                        </button>
                    </Col>
                </Row>
            </Container>

            <Container fluid>
                <Row className="text-center">
                    <Col md={12} lg={12}>
                        {showSelectedFact()}
                    </Col>
                </Row>
            </Container>

            <Container fluid>
                <Row>
                    <Col md={12} lg={12}>
                        {facsInfo.map((show) => {
                            const { upperleftimg, upperrightimg, Id } = show;
                            return (
                                <div key={Id} className="FacilitiesImg">
                                    <img src={upperleftimg} alt="Image 1"></img>
                                    <img src={upperrightimg} alt="Image 2"></img>
                                </div>
                            );
                        })}
                    </Col>
                </Row>
            </Container>

            <Container fluid>
                <Row>
                    <Col md={12} lg={12}>
                        {facsInfo.map((show) =>{
                            const {bottomleftimg, bottomrightimg, Id} = show
                            return(
                                <div key={Id} className="FacilitiesImg">
                                    <img src={bottomleftimg} alt="Image 1"></img>
                                    <img src={bottomrightimg} alt="Image 2"></img>
                                </div>
                            )
                        })}
                    </Col>
                </Row>
            </Container>
        </>
    )
}

export default Facilities

When `showSelectedFact` function is running initially, the `currentId` is empty and filter returns undefined and trying to destructure the undefined object is causing the error. — Junaid Faryad, Sep 20 '21 at 04:12
How can I fix it ? can I just insert value for the state ? const [currentId, setCurrentId] = useState("1"); like this ? — Kim San, Sep 20 '21 at 04:20
Yeah, that's one approach to handle this. Although, this will make a option default selected. — Junaid Faryad, Sep 20 '21 at 04:22
Here is a good collection of [answers](https://stackoverflow.com/questions/48433008/js-es6-destructuring-of-undefined) to destructure an object, which could be undefined. — Junaid Faryad, Sep 20 '21 at 04:24

score 0 · Accepted Answer · answered Sep 20 '21 at 04:22

One possible approach is, you can update the showSelectedFact method to check for the currentId before filter, so, your code not throw exceptions.

    const showSelectedFact = () => {
  if (currentId) { // check if currentId exists before running the filter
    var fac = facsInfo.filter((x) => x.Id === currentId)[0];
    const { Title, Description, Id } = fac || {};
    return (
      <div key={Id}>
        <h1>{Title}</h1>
        <h5>{Description}</h5>
      </div>
    );
  } else return null
};

How to fix mapping error "Cannot destructure property 'Title' of 'fac' as it is undefined." in React JS

1 Answers1