Getting single object from array in constructor

With the Fetch get function i have put all the data in a array that is located in the constructor and with the “map” function i can display them all one by one

but now i would like to get a single object from a array
This is what i have tried:

    showView = (id) => {
        const obj = this.allproducts.find(x => x.id === id);
       
 this.setState({
            Show: true,
Title: obj.title,
Price: obj.Price
quantity: obj.Quantity
        });
    }

I’m not sure I understand what you are asking. Can you do some legwork here?

const obj = this.allproducts.find(x => x.id === id);

Does that return the object you want?

If so, does the setState set the state you want?

You say you’ve “tried” this above solution? What worked? What didn’t? In what exact way didn’t it work? Barring an obvious JS error, it is impossible to see what is going wrong here, because we can’t see the rest of the component and we don’t know the shape of the data.

Right, will explain it more clear.
so i want the “allproduct” too only get an objectet that matches the id
I did not inclucude the function that passes the id into the "showView " function
because its a long code but basicly it is a table were each row has a button that has a "showView " in it.

export class Upload extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Title: "",
            Price: "",
            quantity: "",
            allproducts: []
 };
    }

  async getData() {
        const response = await axios.get('api/Upload/');
        const data = await response.data;
        this.setState({
            allproducts: data
        })
    }

 showView = (id) => {
        const obj = this.allproducts.find(x => x.id === id);

      
        this.setState({
            Show: true,
            Title: obj.Title,
            price: obj.price,
            quantity: obj.quantity
        });
        render() {
 return (
<h2>  {this.state.Title }</h2>
<h2>  {this.state.Price }</h2>
<h2>  {this.state.quantity }</h2>
)}
    }

the error that i get is red box on the screen with a arrow to the following code:

   const obj = this.allproducts.find(x => x.id === id);

in the console it says: Uncaught TypeError: Cannot read property ‘find’ of undefined

I have tried to look up how to get a object from an array and i found the “find” options allot of times but could not find a good example that matches my goal.

i just have no clue how to get data from a array thats why I ask it on here

Hmm… React learner here and I happen to notice a few things (I could be very wrong and happy to be corrected):

  • (Edit: Never mind this one. Just tried using arrow functions to write class methods as opposed to object methods; seem to be working fine.)
    Arrow functions, when created, have their this automatically bound to their parent scope object, so generally they aren’t suitable for writing object methods.

  • Have you tried this.state.allproducts? Probably need to fixed the arrow function matter first.

  • Why is your render method inside showView? If you’d like to process your state data before rendering you can do that inside the render method before return any JSX.

I found the issue it was just as simple as

  const obj = this.state.allproducts;
        const found = obj.find(element => element.id == id);

Thanks for the help anyway

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.