Not rendering JSX from function in React

Question

The function is getting the value of a button click as props. Data is mapped through to compare that button value to a key in the Data JSON called 'classes'. I am getting all the data correctly. All my console.logs are returning correct values. But for some reason, I cannot render anything.

I've tried to add two return statements. It is not even rendering the p tag with the word 'TEST'. Am I missing something? I have included a Code Sandbox: https://codesandbox.io/s/react-example-8xxih

When I click on the Math button, for example, I want to show the two teachers who teach Math as two bubbles below the buttons. All the data is loading. Just having an issue with rendering it.

function ShowBubbles(props){
    console.log('VALUE', props.target.value)
   return (
       <div id='bubbles-container'>
          <p>TEST</p> 
       {Data.map((item,index) =>{
        if(props.target.value == (Data[index].classes)){
          return (
               <Bubble key={index} nodeName={Data[index].name}>{Data[index].name}
              </Bubble>    
          )

        }
    })}
    </div>
   )
}

Can you please share the entire code in a sandbox or something similar so that it'll be easy to reproduce the issue in order to debug it. — rakesh-ranjan
– rakesh-ranjan, Commented Sep 8, 2019 at 20:51
Can you show how you are rendering the ShowBubbles component? Not related to your rendering problem, but if you are trying to render only one Bubble (the one that meets the condition props.target.value == (Data[index].classes) you should filter your Data before the first return. — mgarcia
– mgarcia, Commented Sep 8, 2019 at 21:01
@rakesh-ranjan I have included a CodeSandbox. I want to display when I click on Math button for example, the names of the two teachers who teach that class subject and have it show up as bubbles below. codesandbox.io/s/react-example-8xxih — Elaine
– Elaine, Commented Sep 8, 2019 at 22:37
@mgarcia I want to render as Bubbles those that meet the condition. I commented out in my render the ShowBubbles component. It is set up as a ternary. But it is not working. — Elaine
– Elaine, Commented Sep 8, 2019 at 23:10

Dhaval Jardosh · Accepted Answer · 2019-09-09 06:39:18Z

Sandbox Link: https://codesandbox.io/embed/react-example-m1880

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
const circleStyle = {
  width: 100,
  height: 100,
  borderRadius: 50,
  fontSize: 30,
  color: "blue"
};

const Data = [
  {
    classes: ["Math"],
    name: "Mr.Rockow",
    id: "135"
  },
  {
    classes: ["English"],
    name: "Mrs.Nicastro",
    id: "358"
  },
  {
    classes: ["Chemistry"],
    name: "Mr.Bloomberg",
    id: "405"
  },
  {
    classes: ["Math"],
    name: "Mr.Jennings",
    id: "293"
  }
];

const Bubble = item => {
  let {name} = item.children.singleItem;
  return (
    <div style={circleStyle} onClick={()=>{console.log(name)}}>
      <p>{item.children.singleItem.name}</p>
    </div>
  );
};

function ShowBubbles(props) {
  var final = [];
  Data.map((item, index) => {
    if (props.target.value == Data[index].classes) {
      final.push(Data[index])
    }
  })
  return final;
}

function DisplayBubbles(singleItem) {
  return <Bubble>{singleItem}</Bubble>
}

class Sidebar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      json: [],
      classesArray: [],
      displayBubble: true
    };
    this.showNode = this.showNode.bind(this);
  }

  componentDidMount() {
    const newArray = [];
    Data.map((item, index) => {
      let classPlaceholder = Data[index].classes.toString();
      if (newArray.indexOf(classPlaceholder) == -1) {
        newArray.push(classPlaceholder);
      }
      // console.log('newArray', newArray)
    });
    this.setState({
      json: Data,
      classesArray: newArray
    });
  }

  showNode(props) {
    this.setState({
      displayBubble: true
    });

    if (this.state.displayBubble === true) {
      var output = ShowBubbles(props);
      this.setState({output})
    }
  }
  render() {
    return (
      <div>
        {/* {this.state.displayBubble ? <ShowBubbles/> : ''}  */}

        <div id="sidebar-container">
          <h1 className="sidebar-title">Classes At School</h1>

          <h3>Classes To Search</h3>

          {this.state.classesArray.map((item, index) => {
            return (
              <button
                onClick={this.showNode}
                className="btn-sidebar"
                key={index}
                value={this.state.classesArray[index]}
              >
                {this.state.classesArray[index]}
              </button>
            );
          })}
        </div>
        {this.state.output && this.state.output.map(item=><DisplayBubbles singleItem={item}/>)}
      </div>
    );
  }
}

ReactDOM.render(<Sidebar />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

This works great, Dhaval! Thank you for taking the time to provide a code solution!
code still needs some refactoring, I finished it in a rush. But the good thing is it works. :)
Yes thank you again, Dhaval! if you have time please show me in a sandbox how you would refactor for better React code arrangement. Thank you so much!
Dhaval, how do I add an onclick to each bubble displayed? I want the click event to do something else with the Data array.

rodamn · Accepted Answer · 2019-09-08 23:18:07Z

The issue here is ShowBubbles is not being rendered into the DOM, instead (according the sandbox), ShowBubbles (a React component) is being directly called in onClick button handlers. While you can technically do this, calling a component from a function will result in JSX, essentially, and you would need to manually insert this into the DOM.

Taking this approach is not very React-y, and there is usually a simpler way to approach this. One such approach would be to call the ShowBubbles directly from another React component, e.g. after your buttons using something like:

<ShowBubbles property1={prop1Value} <etc...> />

There are some other issues with the code (at least from the sandbox) that you will need to work out, but this will at least help get you moving in the right direction.

Thanks for taking the time to review the sandbox. Can you provide some concrete working examples of how you would rearrange the code in a Sandbox?

Collectives™ on Stack Overflow

Not rendering JSX from function in React

2 Answers 2

6 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Related