Configuration

The following example demonstrates how to map a collection to TabStripTab components.

<style>
    .weather {
        margin: 30px;
        text-align: center;
    }
</style>
class App extends React.Component {
    items = [{
          disabled: true,
          city: "Paris",
          temp: 17,
          weather: "rainy"
    }, {
          disabled: false,
          city: "New York",
          temp: 29,
          weather: "sunny"
    }, {
          disabled: false,
          city: "Sofia",
          temp: 23,
          weather: "cloudy"
    }, {
          disabled: false,
          city: "London",
          temp: 19,
          weather: "cloudy"
    }]
    constructor(props){
        super(props);

        this.state = {
            selected: 1
        }
    }
    handleSelect = (e) => {
        this.setState({selected: e.selected})
    }
    render() {
        return (
            <TabStrip selected={this.state.selected} onSelect={this.handleSelect}>
            {this.items.map(item => {
                return (
                    <TabStripTab disabled={item.disabled} title={item.city}>
                        <div className="weather">
                            <h4>{item.temp}<span>&ordm;C</span></h4>
                            <p>Weather in {item.city} is {item.weather}.</p>
                        </div>
                    </TabStripTab>
                );
            })}
            </TabStrip>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

In this article

 /