How can pass a props to a variable?

Question

I'm trying "hydrate" props from elements to child components that will render. The problem is that I can't figure out how I can do it with my configuration.

I have seen this answer , I tried to adapt it, but so far I'm getting errors (see bottom).

For a bit of background, I'm developing a Rails based application that uses React for the front end. So I don't use React router or such, it just "displays" the datas.

Here is how I set everything up:

front.js (where everything gets rendered)

import React from 'react';
import ReactDOM from 'react-dom';
import extractActionName from './lib/extractActionName';
import {elementForActionName} from './lib/elementForActionName';
import 'jquery';
import 'popper.js';
import 'bootstrap';

let actionName = extractActionName();
let value = "value";

let renderElement = function (Element, id) {
    ReactDOM.render(
        <Element value={value} />,
        document.getElementById(id)
    );
};

renderElement(elementForActionName[actionName], actionName);

lib/elementForActionName.js

import React from 'react';
import Homeindex from '../home/home';
import Contact from '../home/contact';

// This files create an associative array with id React will be
// looking for as a key and the component as value

export const elementForActionName = {
    'index': <Homeindex />,
    'contact': <Contact/>,
};

lib/extractActionName.js

export default function extractActionName() {
  // The body contains classes such as "home index", so
  // I return the "action name" of my controller (home) to
  // front.js so I will render the good component

  return document.body.className.split(' ').pop();
}

home/home.js

import React from 'react';
import Header from '../layout/header';
import Footer from '../layout/footer';

export default class homeIndex extends React.Component {
  render() {
    return(
      <div>
        <Header/>
        <h1>Hello this will be the content of the landing page hello</h1>
        <Footer/>
      </div>
    )
  }
}

My problem is that I'd like to make an Ajax call in my "front.js" file, then transmit the received data (here, "value"). The error I'm getting is the following:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I'm lacking experience with React, how can I resolve this problem?

Thank you in advance.

Answer 1

You are currently returning the instance of a component:

export const elementForActionName = {
    'index': <Homeindex />, <--- here
    'contact': <Contact/>,
};

And then attempting to instantiate it again:

let renderElement = function (Element, id) {
    ReactDOM.render(
        <Element value={value} />,  // <--- here
        document.getElementById(id)
    );
};

Instead, just use the component class:

export const elementForActionName = {
    'index': Homeindex,
    'contact': Contact,
};