Problems extracting information of a Promise Object React JS

I am doing a News Search Engine, using React + JS and I have some problems extracting information. Let’s first of all check out the main components of my app.

Here I obtain the sections of the most viewed news of the last 7 days in the NY Times (https://developer.nytimes.com/docs/most-popular-product/1/overview I am using this API). So this is my getSections() service:

export default function getSections () {

    const URL= `https://api.nytimes.com/svc/mostpopular/v2/viewed/7.json?api-key=${API_KEY}`;

    
  return fetch(URL)
        .then(res=>res.json())
        .then(response=> {
            const { data = [] } = response;
            if(Array.isArray(data)){
                const {results} = response; 
                console.log(results);
                const sections = results.map(result=>{
                    const { section } = result;
                    return section; 
                  });
                return sections;
            }
        })


};

And, later, I want to obtain the news filtered by section. In order to do that, I have other service implemented: getNewsFilteredBySection()

export default async function getNewsFilteredBySection (sectionSearched="") {

    const URL= `https://api.nytimes.com/svc/mostpopular/v2/viewed/7.json?api-key=${API_KEY}`;
   
    
  return fetch(URL)
        .then(res=>res.json())
        .then(response=> {
            const { data = [] } = response;
            if(Array.isArray(data)){
                const {results} = response; 
                const filteredResults = results.filter(obj => {
                    return obj.section === sectionSearched;
                  });
                console.log(filteredResults);
                return filteredResults;
            }
        })


};

And I need a helper, to extract the attributes I exactly want from filteredResults. That is my getNewsAttributes():

export function getNewsAttributes (filteredResultsJSON=[]) {
        const newsAttributes = JSON.parse(filteredResultsJSON).map(filteredResultJSON=>{
            const { title, abstract, url } = filteredResultJSON;
            console.log(title, abstract, url);
            return {title, abstract, url}; 
          });
        return newsAttributes;
};

I would like you to show my components structure. My App component:

function App() {

  const [section, setSection] = useState([]);

  useEffect(() => {
    getSections().then(sections=>setSection(sections));  
  }, [])

  return (
    <div>
      <Navbar/>
      <ListOfSections section={section}></ListOfSections>
    </div>
  );
}

export default App;

Here my ListOfSections component:

export default function ListOfSections ({section}) {

   const sectionFiltered = section.filter(onlyUnique);


  return (
    <div className="container_list_sections mt-4 ml-4">
        {     
            sectionFiltered.map((section)=> 
                <Section 
                    section={section}
                    // TODO: Create a generator of unique id and send it to section component
                />
            )
        }
    </div>
  )


};

Here my Section component:

export default function Section ({section}) {

    function showEvent (e) {
  console.log("pasa por aquí");
  const sectionSearched = e.target.innerText;
  const filteredResults = getNewsFilteredBySection(sectionSearched);
  console.log(`filteredResults:" ${filteredResults}`);
  const newsAttributes = getNewsAttributes(filteredResults);
  console.log(`newsAttributes ${newsAttributes}`)
  const {title, abstract, url} = newsAttributes;
  console.log (title, abstract, url);

    }

  return (
    <div className="animate__animated animate__fadeIn animate__slower"> 
        <h3 className="section-container mr-4 mb-4 pointer"
            onClick={showEvent}
            >{section}</h3>
    </div>
  )


};

And here my News component, still not working properly:

export default function News ({section}) {

  return (
    <div>
        <h3 className="section-container mr-4 mb-4 pointer">{section}</h3>
    </div>
  )


};

So, my problem is:

·The last console.log of the Section component which console shows is the next one: console.log(filteredResults:" ${filteredResults}); showing in console filteredResults:” [object Promise]. No further lines of that method are shown (I have several console.log) so I might have some errors but I dont know where. My goal is to extract the following information from the object: const {title, abstract, url} = newsAttributes;` to be able to render news with that props. Any idea where am I committing errors? Thanks a lot 🙂