title: How do I fix "Cannot assign to read only property 'style' of object" in this React component?
body: <p>I am creating an own custom tab component. It consists of a tab header which each has a body part. When a tab header is clicked, the corresponding body's style should be set to <code>display:block</code> and all others to <code>display:none</code>.</p>
  <p>For some reasons I am getting this error:</p>
  <blockquote>
  <p>Cannot assign to read only property 'style' of object</p>
  </blockquote>
  <p>I understand that I am not allowed to mutate the style property manually as it seems to be read-only but how do I fix/work around this?</p>
  <p>Here is my code:</p>
  <p><strong>Tabs.js</strong></p>
  <pre><code>import React, { Component } from 'react';
  
  class Tabs extends Component {
  
    constructor() {
      super();
      this.state = {
        activeIndex: 0,
      };
      this.tabHeads = [];
    }
  
    // Initial composition of tab heads
    componentWillMount() {
      React.Children.map(this.props.children, (el, i) =&gt; {
        const tab = el;
        const key = `tabKey${i}`;
        this.tabHeads.push((
          &lt;div role=&quot;button&quot; onClick={e =&gt; this.onTabClick(e, i)} key={key}&gt;{tab.props.title}&lt;/div&gt;
        ));
      });
    }
  
    // Called when user clicks a tab head
    onTabClick(e, i) {
      this.setState({ activeIndex: i });
    }
  
    render() {
      // Set display none or block for each tab
      React.Children.map(this.props.children, (el, i) =&gt; {
        const tab = el;
        let visibility = 'none';
        if (i === this.state.activeIndex) visibility = 'block';
        const newStyle = Object.assign({}, tab.props.style, { display: visibility });
        tab.props.style = newStyle;
      });
  
      return (
        &lt;div style={this.props.style}&gt;
          {this.tabHeads}
          {this.props.children}
        &lt;/div&gt;
      );
    }
  }
  
  export default Tabs;
  </code></pre>
  <p>Usage is like this:</p>
  <pre><code>render() {
    const tabStyles = [
      { padding: '20px' }, // Tab 0
      { padding: '20px' }, // Tab 1
    ];
  
    &lt;Tabs&gt;
  
      &lt;Tab style={tabStyles[0]} title=&quot;Tab1&quot;&gt;
        &lt;div&gt;Content 1&lt;/div&gt;
      &lt;/Tab&gt;
  
      &lt;Tab style={tabStyles[1]} title=&quot;Tab2&quot;&gt;
        &lt;div&gt;Content 2&lt;/div&gt;
      &lt;/Tab&gt;
  
    &lt;/Tabs&gt;
  }
  </code></pre>