I am writing a simple react app that makes an api call to reddit.
In sorting through the data I am trying to target the value for the first element in its media_metadata object, the first element is an id that is unique, so I am trying to get the key for the first object (I only need 1 key, value pair from each post as I only need to display the first image which is what the media_metadata corresponds to). so as they are unique id's I am trying to use Object.keys, but when I try to write it such as in the code below, it just doesnt seem to work.
tile.js
if(fulldata.media_metadata) {
let media = fulldata.media_metadata
let firstKey = Object.keys(media)[0]
console.log('media', media)
console.log('second try', media.vz3t8xwjirt91.status)
console.log('trying', media.firstKey.status)
}
in the above snipet the 'second-try' console log prints fine (I just went to the developer tools to extract one of the id's for testing purposes to compare against using Object.keys as a sanity check) however when using Object.keys in its place I get a type error: Uncaught TypeError: Cannot read properties of undefined (reading 'status').
can I not use Object.keys in this manner? what are the alternatives.
below is some other relevant code such as in the api calls:
TileList.js
import React, { useState, useContext } from "react";
import Tile from "./Tile";
import { Context } from "../Context"
export default function TileList() {
const { apiData } = useContext(Context)
// const tileItemElements = apiData.map(item => ())
const tileItemElements = apiData.map(item => (
<Tile
key={item.data.id}
img={item.data.thumbnail}
fulldata={item.data|| "" }
title={item.data.title}
id={item.data.id}
comments={item.data.num_comments}
ups={item.data.ups}
author={item.data.author}
date={item.data.created}
subreddit={item.data.subreddit}
/>
))
return (
<>
<div className="tilelist">
{tileItemElements}
</div>
</>
)
}
Context.js
import React, { useState, useEffect } from "react"
import { mockData, mockCommentData } from "./resources/data"
const Context = React.createContext()
function ContextProvider({ children }) {
const [apiData, setApiData] = useState([])
const [commentData, setCommentData] = useState([])
const [mockApiData, setMockApiData] = useState([])
const [mockApiCommentData, setMockApiCommentData] = useState([])
const [hasSearchTerm, setHasSeartchTerm] = useState(false)
const [searchData, setSearchData] = useState("")
const [submitData, setSubmitData] = useState("")
const [subReddit, setSubReddit] = useState("Home")
useEffect(() => {
fetch(`https://www.reddit.com/r/${subReddit}/hot.json`)
.then(res => res.json())
.then(item => setApiData(item.data.children))
.catch((err) => {
console.log('error error')
});
}, [subReddit])
// useEffect(() => {
// fetch('https://www.reddit.com/r/worldnews/comments/y1ppwm.json')
// .then(res => res.json())
// .then(item => setCommentData(item[1].data.children))
// .catch((err) => {
// console.log('error error')
// });
// }, [])
console.log('apidata', apiData)
// console.log('commentdata', commentData)
function handleSearchChange(event) {
const { value } = event.target
setSearchData(value)
}
function handleSearchSubmit(event) {
event.preventDefault()
setSubmitData(searchData)
}
function handleSubRedditChange(event) {
setSubReddit(event.target.value)
}
console.log('subreddit', subReddit)
return (
<Context.Provider value={{
apiData,
mockApiData,
mockApiCommentData,
hasSearchTerm,
setHasSeartchTerm,
handleSearchChange,
searchData,
handleSearchSubmit,
submitData,
handleSubRedditChange
}} >
{children}
</Context.Provider>
)
}
export { ContextProvider, Context }
the developer tools of the media_metadata that I am trying to target