How to retrieve a specific property from an array within an object using Typescript

I'm currently working on accessing information from a blog using Typescript. I'm having trouble figuring out how to access the title item since it is within an array.

    export default function Post({list}: Props) {
console.log("🚀 ~ file: post.tsx ~ line 13 ~ Post ~ getBlog", list)
  return (
    <div>
    <h1>{list?.listBlogs?.items?.title}</h1>
    <img src={list?.getBlog?.coverImage}></img>
    <p>{list?.getBlog?.content}</p>

    <p>A whole paragraph</p>
    </div>
  )
}

Here's the snippet highlighting the issue I'm encountering with the title. https://i.sstatic.net/WXSXz.png

typescript

Answer â„–1

After some experimentation, I discovered a way to organize it like this:

    const BlogList = ({blog}: Props) => {
  return (
    <div className="container">
    {blog?.listBlogs?.items?.map((blogTitle) => {
      return (
        <div className="allBlogs">
            <img src={blogTitle?.coverImage}></img>
            <h1>Title: {blogTitle?.title}</h1>
            <p>{blogTitle?.content}</p>
        </div>
    )
    })}
    </div>
  )
}
export default BlogList;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for resolving TypeScript errors when validating React Semantic UI Form using React-Hook-Form

I am currently using Semantic UI to design a registration form. Once the form is created successfully, I aim to implement validation for it using React-Hook-Form. The errors that have been popping up are pointing to the newUser in the dispatch method and s ...

reactjstypescriptsemantic-uireact-hook-form

Learning how to merge two observable streams in Angular2 by utilizing RxJS and the powerful .flatMap method

Within my Angular2 app, I have created an Observable in a Service called ContentService. Here is a simplified version of the code: @Injectable() export class ContentService { constructor(private http:Http, private apiService:ApiService) { th ...

typescriptangularrxjs

A method for transferring information stored in chrome.storage to a variable within an Angular component

How can I effectively assign data fetched from chrome.storage.sync.get to my Angular component's variable? Below is the code snippet of my component: export class KTableComponent implements OnInit { words: string[] = []; constructor() { } ...

angulartypescriptgoogle-chrome-extensiongoogle-chrome-storage

[Angular 10][Rxjs] How come the second pipe is not activating?

I am facing an issue where I have two subscribers to the same Observable, but the second one is not emitting any values. Could there be a limitation within the pipe that I am unaware of? component.ts private readonly destroyed$ = new Subject<void> ...

angulartypescriptrxjs

Retrieving a video file from the input and showcasing it using Typescript

Currently, I have implemented this code in order to retrieve an image that has been "uploaded" into the browser using the <input type="file"> tag, and then sending the data to a component that will utilize it. fileReady(e) { let file: File = e[ ...

angulartypescript

Angular 16: Troubleshooting RxJs Problem with Updating Total in Header Component

Hello, I'm facing an issue with my Observable and need some guidance. Currently, I have a functional cart and checkout system that works well when adding items to the cart. It successfully manages total items and costs. These components are located a ...

angulartypescriptrxjs5

There are several InputBase elements nested within a FormControl

There seems to be an issue: Material-UI: It appears that there are multiple InputBase components within a FormControl, which is not supported. This could potentially lead to infinite rendering loops. Please only use one InputBase component. I understand ...

reactjstypescriptmaterial-ui

Exploring the functionality of generic components in React Native when using TypeScript

As an illustration, consider export class FlatList<ItemT> extends React.Component<FlatListProps<ItemT>> which incorporates the generic type ItemT. How can I utilize it in a .tsx code? When not parametrized, it appears like this: <Flat ...

typescriptreact-native

Tips for transforming or changing Partial<T> into T

I have a variable named Partial<T> in my coding project. returnPartial(): Partial<T> {} proceed(param T) {} //<-- the provided input parameter will always be of type T in this function and cannot be changed let object = this.returnPartial( ...

typescripttypescript-typings

Best practice for importing ts files from an npm package

When faced with the need to divide a ts project into multiple repositories/packages for creating microservices, the challenge arises in combining these packages efficiently. Some packages are required in one microservice, others in another, and some in all ...

node.jstypescriptnpmimportmicroservices

Can all objects within an interface be iterated through in order to retrieve both the key and its corresponding value?

I have created an interface that is capable of accepting a variety of search criteria and then passing it to a service that will incorporate those values into the service URL. I am wondering if there is a way to iterate through all the objects in the inter ...

typescriptangular

Circular reference in Angular/TypeScript

I encountered a circular dependency issue in my Angular project and tried various solutions, including exporting all dependent classes from a "single file" as suggested here. Unfortunately, this approach did not work for me. I then explored other solutions ...

javascriptangulartypescriptdependency-injectioncircular-dependency

Although there may be some issues with tslint, the functionality is operating smoothly

I am in the process of learning tslint and typescript. Currently, I am facing an issue that I need help with. Could you provide guidance on how to resolve it? Despite conducting some research, I have been unable to find a solution. The relevant code snippe ...

javascriptjqueryangulartypescripttslint

Use TypeScript types to specify the types of props passed into a React component for better type safety and clarity

Struggling to extract the value passed to a prop in my react component, and use it as a type for other props within the same component. const TestPage = () => { return ( <Test tabs={[ { label: "test-label", value: " ...

typescripttypescript-genericsreact-props

How to retrieve the value of an input field in Angular 2/Typescript without using ngModel

Currently, I'm utilizing Typescript in conjunction with Angular2, mirroring the structure of the Angular2 Tour of Heroes guide. There is a specific input field that I aim to associate a change event with, triggering custom logic whenever the value wi ...

javascriptangulartypescript

The code is throwing an error: Unable to access the 'grower' property as it is undefined

I'm facing an issue with a button that triggers the function 'SaveNewOpportunity' in my component file. When I click the button, I encounter the following error: ERROR TypeError: Cannot read property 'grower' of undefined Here is ...

angulartypescript

What are the steps to connecting incoming data to an Angular view utilizing a reactive form?

Hello, I am currently fetching data from an API and have successfully displayed the teacher values. However, I am unsure of how to utilize the incoming array values for "COURSES" in my Angular view. This is the response from the REST API: { "courses ...

htmlarraysangulartypescript

Developing a discriminated union by utilizing the attribute names from a different type

In my quest to create a unique generic type, I am experimenting with extracting property names and types from a given type to create a discriminated union type. Take for example: type FooBar = { foo: string; bar: number; }; This would translate t ...

typescript

typescript event handling with oninput

When working with a slider, I am trying to detect when the user changes the value of the slider in order to display it. I have been following the tutorial at https://www.w3schools.com/howto/howto_js_rangeslider.asp. However, this code is not compatible wi ...

javascripttypescriptdomevents

Encountering an issue with TypeScript and Jest when trying to import a file leads to an

Having trouble with using Jest in a TypeScript environment. //myprovider.tsx class MyProvider{ constructor(){} giveMeFive(): int{ return 5; } } export { MyProvider } // myprovider.test.js import { MyProvider } from './myprovider'; ...

reactjstypescriptjestjsbabeljs