How to get selected value from mapped array?

Question

I have an array of data labeled this.state.candidate_stages that I mapped through. How can I get the selected values in the array? For example, when I select a displayed value, I would like to console log the value that was selected.

class SettingsPage extends Component {

 getStage = (data) => {
    console.log(data);
    console.log("testing");
    console.log(this.state.candidate_stages);
  };

componentDidMount() {
    axios
      .get("https://url", config)

      .then((response) => {
        console.log("Stages:", response.data);
        this.setState({ candidate_stages: response.data });
      })
      .catch((error) => {
        if (error.response) {
          // The request was made and the server responded with a status code
          // that falls out of the range of 2xx
          console.log(error.response.data);
          console.log(error.response.status);
          console.log(error.response.headers);
        } else if (error.request) {
          // The request was made but no response was received
          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
          // http.ClientRequest in node.js
          console.log(error.request);
        } else {
          // Something happened in setting up the request that triggered an Error
          console.log("Error", error.message);
        }
        console.log(error.config);
      });
  }    

  render() {
    return (
      <div className="settings-page">
              <div>
                {
                  // Ternary statement - return empty div if undefined
                  // Otherwise, return a map function to loop through array
                  // of candidate_stages
                  this.state.candidate_stages === undefined ? (
                    <div></div>
                  ) : (
                    this.state.candidate_stages.map((element) => (
                      <div
                        className="stage-container"
                        onClick={(e) => this.getStage(e)}
                      >
                        <h1 key={element.id} className="candidate-tab">
                          {element.tab}
                        </h1>
                        <h2 key={element} className="candidate-title">
                          {element.title}
                        </h2>
                        <ion-icon
                          id="pencil"
                          name="create"
                          onClick={(e) => {
                            this.showEditStage(e);
                          }}
                        ></ion-icon>
                        <ion-icon id="pencil-square" name="square"></ion-icon>
                        <ion-icon id="trash" name="trash"></ion-icon>
                        <ion-icon id="trash-square" name="square"></ion-icon>
                      </div>
                    ))
                  )
                }
              </div>
         </div>
     ) 
   }
}

Answer 1

function printData(dataObject)
{
    if(!dataObject) return;
    let keys = Object.keys(dataObject);
    for(let i = 0; i < keys.length; i++)
    {
        console.log(`label: ${keys[i]} data: ${dataObject[keys[i]]}`);
    }
}

i don't know it is what you expected answer.

Answer 2

I assume you want to gather the mapped element into the getStage function, you can just modify the onClick attribute yo be

onClick={(e) => this.getStage(e, element)}

Besides that, I would suggest here to make clearer code modifying this part of the code to:

this.state.candidate_stages && (
  this.state.candidate_stages.map((element) => (... // the rest of the code

This way Javascript check if this.state.candidate_stages is truthy (undefined is falsy) and if it is, it keeps evaluating the second expression and since is the last expression in the && operator, it returns that value, that it's what you want.

Now if the value of the state is falsy, it just returns that falsy value and nothing is rendered in the frontend, that's what you want too. :)