How to get an array with onClick?

user_16012261 0
Viewed 68

I'd like to get specific an array with onClick but the results always is undefined. if the explanation is unclear, tell me please. i will fix it ! Thanks here is the code

 const chartType = ["Line", "Bar", "Pie", "Radar", "Doughnut", "Bubble"];
  const getType = (e) => {
    if (e.currentTarget === "Line") {
      console.log("true");
    }
  };
  const typeList = chartType.map((chart) => (
    <div>
      <h1 onClick={getType}>{chart}</h1>
    </div>
  ));

u guys really helped me to solve this !! I appreciate it so much !! I hope u all have a really nice day !!

reactjs javascript
4 Answers

your onClick is actually grabbing the html element, that's why you're not getting any matches, when you click a particular h1, it returns <h1>Foo</h1>. To get the correct target you need e.currentTarget.innerText. Also since you are using React, please add a unique key prop to the iterated items.

user_76672480

When onClick event happen, it fires MouseEvent (you can see it when use console.log(e) from getType function). If you want to pass custom parameters, you should do like the following example:

  const chartType = ["Line", "Bar", "Pie", "Radar", "Doughnut", "Bubble"];
  const getType = (type) => {
    if (type === "Line") {
      console.log("true");
    }
  };
  const typeList = chartType.map((chart) => (
    <div>
      <h1 onClick={() => getType(chart)}>{chart}</h1>
    </div>
  ));
user_143291920

e.currentTarget returns the entire tag for example you will get this

<h1>Line</h1>

what you can do instead is to pass the chart as the argument to the getType.

const getType = (chart) => {
    if (chart === "Line") {
      console.log("true");
    }
  };

  const typeList = chartType.map((chart) => (
    <div>
      <h1 onClick={() => getType(chart)}>{chart}</h1>
    </div>
  ));
user_88843880

If you want to change the chart type, you can use the useState hook to store the active state.

Edit: I changed target.textContent to target.dataset.chartType and added the data attribute called data-chart-type to each <h1>. This is safer than using rendered text.

const { useState } = React;

const ChartTypes = ['Line', 'Bar', 'Pie', 'Radar', 'Doughnut', 'Bubble'];

const ChartTypeList = (props) => {
  const { activeType, handleSelect } = props;

  return (
    <div className="ChartTypeList">
      {ChartTypes.map((chartType) => (
        <h1
          key={chartType}
          className={activeType === chartType ? 'active' : ''}
          data-chart-type={chartType}
          onClick={handleSelect}>
            {chartType}
        </h1>
      ))}
    </div>
  );
};

const App = () => {
  const [activeType, setActiveType] = useState(null);

  const handleSelect = ({ target }) => {
    setActiveType(target.dataset.chartType);
    console.log(`Changed type: "${target.dataset.chartType}"`);
  };

  return (
    <div className="App">
      <ChartTypeList activeType={activeType} handleSelect={handleSelect} />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('react'));
.as-console-wrapper { max-height: 4em !important; }

.App > .ChartTypeList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
}

.ChartTypeList h1 {
  color: grey;
  font-size: 1em;
  font-style: italic;
  text-align: center;
}

.ChartTypeList h1:hover {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.ChartTypeList h1.active {
  color: unset;
  font-style: unset;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

user_17622240
Related