title: React Stateless Components: Interacting with their output and appearance
body: <p>I have looked around for an answer to this - the closest I found being <a href="https://stackoverflow.com/questions/51642380/toggling-visibility-of-array-of-stateless-react-components">this question</a> - but there is I think a significant difference in my case (the fact that it starts to get into the parent holding the state of its children's... children) which has finally lead to me asking for some clarification.</p>
  
  <p>A very simple example of what I mean is below (and will hopefully better illustrate what I'm asking):</p>
  
  <p>Suppose we have a bunch of book documents like</p>
  
  <pre><code>bookList = [
  {
    title: "book 1", 
    author: "bob", 
    isbn: 1, 
    chapters: [
  { chapterNum: 1, chapterTitle: "intro", chapterDesc: "very first chapter", startPg: 2, endPg: 23 }, 
  { chapterNum: 2, chapterTitle: "getting started", chapterDesc: "the basics", startPg: 24, endPg: 45 }
  ]},
  {
   title: "book 2" ... }
  ]
  </code></pre>
  
  <p>So main point being these embedded objects within documents that could be very long and as such may be collapsed / expanded. </p>
  
  <p>And then here is a rough sample of code showing the components</p>
  
  <pre><code>class App extends Component {
      constructor(props) {
          super(props);
          this.state = {
              books: bookList,
              focusBook: null
          }
          this.updateDetailDiv = this.updateDetailDiv.bind(this);
      }
  
      updateDetailDiv(book) {
          this.setState(
              { focusBook: book}
          );
      }
  
      render() {
          return(
              &lt;BookList 
                  bookList = {this.state.books} 
                  updateDetailDiv = { this.updateDetailDiv }
              /&gt;
              &lt;BookDetail
                  focusBook = { this.state.focusBook }
              /&gt;
          );
      }
  }
  
  const BookList = props =&gt; {
      return (
          props.bookList.map(item=&gt;
              &lt;li onClick={()=&gt; props.updateDetailDiv(item)}&gt; {item.title} &lt;/li&gt;
              )
          );
  }
  
  const BookDetail = props =&gt; {
       return (
          &lt;div className="bookDetails"&gt;
          { props.focusBook != null
          ? &lt;div&gt;
              {props.focusBook.title}, 
              {props.focusBook.author},
              {props.focusBook.isbn}
              Chapters:
              &lt;div className="chapterList"&gt;
                  { props.focusBook.chapters.map(item=&gt;
                      &lt;span onClick={()=&gt;someFunction(item)}&gt;{item.chapterNum} - {item.chapterName}&lt;/span&gt;
                      )}
              &lt;/div&gt;
              &lt;div id="chapterDetails"&gt;
                  This text will be replaced with the last clicked chapter's expanded details
              &lt;/div&gt;
          &lt;/div&gt;
          : &lt;div&gt;
              Select A Book
           &lt;/div&gt; 
       })
  }
  
  someFunction(item) {
   document.getElementById('chapterDetails').innerHTML = `&lt;p&gt;${item.chapterDesc}&lt;/p&gt;&lt;p&gt;${item.startPg}&lt;/p&gt;&lt;p&gt;${item.endPg}&lt;/p&gt;`;
  }
  
  </code></pre>
  
  <p>So my problem is that i'm not sure what the best approach is for handling simple cosmetic / visual changes to data in functional stateless components without passing it up to the parent component - which is fine and makes sense for the first child - but what happens when many children will have their own children (who may have their own children) --> all requiring their own rendering options? 
  For example - here the App component will re-render the DetailDiv component (since the state has changed) - but I don't want the App also handling the DetailDiv's detailed div. In my example here its all very simple but the actual application I'm working on has 2 or 3 layers of embedded items that - once rendered by App - could realisticially just be modified visually by normal JS. </p>
  
  <p>SO in my example you'll see I have a <code>someFunction()</code> in each Chapter listing - I can make this work by writing a separate simple 'traditional JS DOM function' (ie: <code>target.getElementById</code> or <code>closest()</code> -- but i don't think i'm supposed to be using normal JS to manipulate the DOM while using React.</p>
  
  <p>So again to summarize - what is the best way to handle simple DOM manipulation to the rendered output of stateless components? Making these into their own class seems like overkill - and having the 'parent' App handle its 'grandchildren' and 'great-grandchildren's state is going to be unwieldy as the Application grows. I must be missing an obvious example out there because I haven't seen much in the way of handling this without layers of stateful components. </p>
  
  <p><strong>EDIT</strong> for clarity:</p>
  
  <p><code>BookDetail</code> is a stateless component. </p>
  
  <p>It is handed an object as a prop by a parent stateful component (<code>App</code>)</p>
  
  <p>When  <code>App</code>'s state is changed, it will render again, reflecting the changes.</p>
  
  <p>Assume <code>BookDetail</code> is responsible for displaying a lot of data.</p>
  
  <p>I want it so each of the <code>span</code> in <code>BookDetail</code>, when clicked, will display its relevant <code>item</code> in the <code>chapterDetail</code> div. 
  If another <code>span</code> is clicked, then the <code>chapterDetail</code> div would fill with <em>that</em> <code>item</code>'s details. (this is just a simple example - it can be any other pure appearance change to some stateless component - where it seems like overkill for a parent to have to keep track of it)</p>
  
  <p>I don't know how to change the UI/appearance of the stateless component after it is rendered without giving it state OR making the parent keep track of what is essentially a 'substate' (since the only way to update the appearance of a component is to change its state, triggering a render). </p>
  
  <p>Is there a way to do this without making BookDetail a stateful component?</p>