How can I call an array from one component to show in another component using Class Component in React-js?

Question

I have a question that I believe that is simple, buuut I couldn't solve it and I didn't find something similar on the internet.

I have a React Component that have an array like state and I'm trying to take this array and put in another array into a select-option.

This is the Component with the array:

import React,{Component} from "react";


class CarList extends Component{
  constructor(props){
  super(props);
  this.state = {
    carList: ['Jeep', 'Kwid','HB20','Ônix', 'Prisma', 'Gol quadrado']
  }
  }


render(){
    return(
      <div>
        <select>
            {this.state.carList.map( (item,ii)=>{
                return(
                    <option key={ii}>{item}</option>
                )
            } )}
        </select>
      </div>
    );
  }
}


export default CarList;

And this is the Component that is render on React-dom:


import React from "react";
import { Component } from "react";
import CarList from "./components/Tabela";


class App extends Component{
constructor(props){
  super(props);
  this.state={
    
  }
}



render(){
  return(
    <div>
      <p>I got it! Here is the car list:</p>
      <select>
        {this.state.carList.map(  (item,x)=>{
          return(
            <option key={x}>{item}</option>
          )
        })}
      </select>
    
    </div>
  )
}
}

export default App;```

Hey!

I tried to call with a map();
I tried to import the component;
I tried to call the array just before import the component;

Can you explain more what would you like to happen in the App? Do you want to access the listaCargos property from the CarList in the app? Or do you simply need to render the select element from CarList? If yes, then it might be enough to just put <CarList /> in the App component — Hieu Cao
– Hieu Cao, Commented Jan 19, 2023 at 14:38
Hi! I noticed an error in the declaration of the array. I just fixed it. I need to access the array carList in the App component. — Jorge L
– Jorge L, Commented Jan 19, 2023 at 17:08
Would it be possible for you to declare the carList state the App component instead? If the carlist is required inside the Carlist component, you can pass the list as a prop to the child component. — Hieu Cao
– Hieu Cao, Commented Jan 19, 2023 at 21:28

Hieu Cao · Accepted Answer · 2023-01-19 21:30:22Z

0

Not sure if I understand you correctly. Here is an option:

From checking your App component code, the select component would give the same result as this:

  render() {
    return (
      <div>
        <p>I got it! Here is the car list:</p>
        <CarList />
      </div>
    );
  }

answered Jan 19, 2023 at 21:30

Hieu Cao

915 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I call an array from one component to show in another component using Class Component in React-js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related