How to Split Array Item Values in Firebase Firestore Array in React.js

Question

I have an array in my firestore collection called features and it hold a set of features. Now i want to extract the values from the array and loop them and display them in a list.

But when i do so they are displayed stuck together like this:

In my firestore it saved as such:

How can i get each value to be seperated and shows the icon beside when i loop through the array and print the values?

here is my code:

    const [features, setFeatures] = useState([]);
    const featuresList = []

const getPropertyDetails = async () => {

          await firebase.firestore().collection("Properties").where("propertyID","==",propID).get().then((snapshot) => {
     
             snapshot.forEach((doc) => {
            
               const {features} = doc.data();
              
               
               featuresList.push({
                features:features,
               })
               
               setFeatures(featuresList)
             })
       
           })
         }

        useEffect(() => {
          getPropertyDetails()
        },[])

 

     return (

 <div className="property-news-single-card border-bottom-yellow">
              <h4>Features</h4>
              <div className="row">
                <div className="col-sm-4">
                <ul className="rld-list-style mb-3 mb-sm-0">
                  {features.map((feature,i) => (

                    <li><i className="fa fa-check" />{feature.features}</li>
                  
                  ))
                  }
                  </ul>
                </div>
              </div>
            </div>
)

Answer 1

I solved the problem this way, just had to map the data and then map the features array and return the value.

<ul className="rld-list-style mb-3 mb-sm-0">
                  {data.map((item,i) => (

                    item.features.map((feature,i) => {
                              
                      return (

                        <li><i className="fa fa-check" />{feature}</li>
                      )
                    })  
                  ))
                  }
                </ul>