Languages
[Edit]
PL

React - lista rozwijana na podstawie tablicy

0 points
Created by:
Anisha-Kidd
382

W tym artykule chcieliby┼Ťmy pokaza─ç, jak stworzy─ç list─Ö rozwijan─ů na podstawie tablicy┬áw Reakcie.

Szybkie rozwi─ůzanie:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poni┼╝sze linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const colors = [
    {value: 'czerwony',  text: 'Czerwony'},
    {value: 'żółty',     text: 'Żółty'},
    {value: 'niebieski', text: 'Niebieski'}
];

const App = () => {
    const [color, setColor] = React.useState('red');
    const handleChange = e => setColor(e.target.value);
    const handleSubmit = e => {
        e.preventDefault();
        const data = {
          	color: color
        };
        const json = JSON.stringify(data);
        console.clear();
        console.log(json);
    };
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            Wybierz sw├│j ulubiony kolor:
            <select value={color} onChange={handleChange}>
              {colors.map(item => {
                return (<option key={item.value} value={item.value}>{item.text}</option>);
              })}
            </select>
          </label>
        </div>
        <button type='submit'>Zatwierd┼║</button>
      </form>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Przykład wybranego komponentu niestandardowego

W poni┼╝szym przyk┼éadzie przesy┼éamy tablic─Ö opcji┬ájako┬áw┼éa┼Ťciwo┼Ť─ç.┬á

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poni┼╝sze linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

const Select = ({value, options, onChange}) => {
  	return (
      <select value={value} onChange={onChange}>
        {options.map(option => {
          return (<option key={option.value} value={option.value}>{option.text}</option>);
        })}
      </select>
    );
};

const colors = [
    {value: 'czerwony',  text: 'Czerwony'},
    {value: 'żółty',     text: 'Żółty'},
    {value: 'niebieski', text: 'Niebieski'}
];

const App = () => {
    const [color, setColor] = React.useState('red');
    const handleChange = e => setColor(e.target.value);
    const handleSubmit = e => {
        e.preventDefault();
        const data = {
          	color: color
        };
        const json = JSON.stringify(data);
        console.clear();
        console.log(json);
    };
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            <span>Wybierz sw├│j ulubiony kolor:</span>
            <Select value={color} options={colors} onChange={handleChange} />
          </label>
        </div>
        <button type='submit'>Submit</button>
      </form>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

ReactJS (PL)

React - lista rozwijana na podstawie tablicy
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join