Cant Render React Componet, Error In my understanding or code?

Question

So I have built a graph generator and have all the correct data on the props the problem is when I go to render the build component It logs

Object { "$$typeof": Symbol(react.element), type: createElement(), key: "1", ref: null, props: {…}, _owner: null, _store: {…}, … }

Here is the Code I am sure its something silly I am not understanding about the render.

i

mport React, { Component } from 'react'
import * as action from '../../actions'
import { connect } from 'react-redux'
import jsx from 'react-jsx'
import { bindActionCreators } from 'redux'
import {Modal} from './Modal'
@connect(
  (flux, props) => {

    return {
      filters: flux.FilterStore,
      ready: flux.FilterStore.ready,
      presets: flux.DataStore.preSelectList,
      graphs: flux.GraphStore.graphList
    }
  },
  (dispatch, props) => {
    dispatch(action.fetchGraphList())
    return {
      addDataReportGraphDetails: bindActionCreators(action.addDataReportGraphDetails, dispatch)
    }
  }
)

class RenderGraphPreview extends Component {
  constructor(props) {
    super(props)
    this.state = {
      running: {},
      show:false,
      graph:{}
    }
    this.data = 0;
  }


  //Error function for shorthand errors
  throwError = (string = "Error", err = null) => {
    throw new Error(`${string}:${err}`)
  }

  //simple print function to print objects and strings
  p = (string, variable) => {
    typeof variable === `object` ? variable = JSON.stringify(variable) : variable
    console.log(`${string}:${variable}`)
  }

  showModal = e => {
    this.state.show = true
    }
  

  generateGraph = ({ presets, filters, graphDetails }) => {
    var reportProps = {
      wasRunning: true,
      companyName: filters.company_name,
      companyVertical: filters.company_vertical,
      graphTitle: jsx.client(`<div>${graphDetails.title}</div>`)(reportProps).props.children
    }
    this.data++

    if (typeof reportProps.graphTitle == "object") {

      reportProps.graphTitle = reportProps.graphTitle.join("")
    }
    if (!this.state.running) {
      reportProps.wasRunning = false
      this.state.running = true
    }
    if (graphDetails.graph) {
      var Graph = React.createFactory(require(`../graphs/${graphDetails.graph}`).default);
      var newGraphProps = {}
      var graphPropKeys = Object.keys(graphDetails.props || {})
      graphPropKeys.map((graphKey) => {

        if (graphDetails.props[graphKey] && graphDetails.props[graphKey].toString().length > 0)
          newGraphProps[graphKey] = graphDetails.props[graphKey]
      })
      if (graphDetails.timeframe) {
        newGraphProps[timeframe] = graphDetails[timeframe]
      }

      if (graphDetails.props.attackIndexFilterPreset) {
        let preset; 
        for (let j = 0, jEnd = presets.length; j < jEnd; j++) {
          if (presets[j]._id == graphDetails.props.attackIndexFilterPreset) {
            return preset = presets[j]
          }
        }
        if (preset) {
          console.log(`In presents`)
          newGraphProps = { ...preset, ...newGraphProps }
        }
      }
    }
      // console.log(<Graph key={this.state.count++} isDocument={true} reportKey={graphDetails.key} onImageCreated={this.props.addDataReportGraphDetails} {...filters} {...reportProps} {...newGraphProps}/>)
    return (
      <Graph key={this.data} isDocument={true} reportKey={graphDetails.key} onImageCreated={this.props.addDataReportGraphDetails} {...filters} {...reportProps} {...newGraphProps}/>
    )
  }


    //Verifies we have the correct data to build the graph
    startGraphGeneration = async (e,{ props }) => {
      e.preventDefault()
      let require = this.props.filters && this.props.presets && props
      if (!require) {
        this.throwError()
      }
      let graphProps = {
        presets: this.props.presets,
        filters: this.props.filters,
        graphDetails: props,
      }
     let g = await this.generateGraph(graphProps) 
      this.setState({
        graph: g
      });
     console.log(g)
     
    }

   

    render() {
      var x = this.state.graph
    return (
      
     <div> 
       <button onClick={(e) => this.startGraphGeneration(e,this.props)}>Preview Graph</button> 
        {this.state.graph ? <x/> : `Doing Noting`}
     </div>
    )
   

    }
  }

  export default connect()(RenderGraphPreview)

Answer 1

In your render method you use this.state.graph. You set this variable to the value returned from generateGraph function, which returns rendered node, not a component . And then you try to render this node as a component(<x/>), which doesn't work. Also in generateGraph function console.log(g) shows you rendered component. So just return x in you render method instead:

 render() {
    var x = this.state.graph
    return (

     <div> 
       <button onClick={(e) => this.startGraphGeneration(e,this.props)}>Preview Graph</button> 
        {this.state.graph ? x : `Doing Noting`}
     </div>
    )
 }