Finding React Components nested inside html elements

Question

I am trying to write a reusable component so as to use in future projects. The code I have written works so long as the component "T" is not nested inside html elements.

The localize.js I have written is as follows;

import React, { Component } from 'react';

const Localizeit = (props) => {
  let textWithLanguageProps = React.Children.map(props.children, function(child) {
    let { s } = child.props; 
    if (React.isValidElement(child)){
        return React.cloneElement(child, {lang : props.data[s]} );
      } 
      return child;
  });
  return (
    <div>
      {textWithLanguageProps}
    </div>
  )
}

const T = ({lang}) => (
  <span>{lang}</span>
)


export { Localizeit , T};

In the component in which I am using my translation components I wrap everything that's going to be rendered inside and then the component checks whether there is a valid react element. If there is then they rendered with the props lang along with the string. This works so long as the component is not nested. I haven't been able come up with a solution to this problem. Do I have to go in depth and check if the html element has a nested react component ?

demo.js is as follows ;

import React, { Component } from 'react'
import { render } from 'react-dom'
import { Localizeit, T } from './localize';

const en = {
            hello: "hello world",
            works: "it works weirdly enough"
           }

const es = {
            hello: "hola mundo",
            works: "funciona bastante raro"
           }
const tr = {
            hello: "merhaba dunya",
            works: "garip bir sekilde calisiyor."
           }


class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lang: en
    }
  }
  render() {
    return (
      <div>
        <Localizeit data={this.state.lang}>
          <button onClick={() => this.setState({ lang: en })}>en</button>
          <button onClick={() => this.setState({ lang: tr })}>tr</button>
          <button onClick={() => this.setState({ lang: es })}>es</button>
          <h1>react-localizeit Demo</h1>
          <T s="hello" />
          <br />
          <p>Following doesn't work</p>
          <span><T s="works" /></span>
        </Localizeit>
      </div>
    )
  }
}

render(<Demo />, document.getElementById('root'))

A working demo can be found here.

Answer 1

I have a working prototype in render props version. Here I can nest as I want and it still works.

const en = {
  hello: "hello world",
  works: "it works weirdly enough"
};
const es = {
  hello: "hola mundo",
  works: "funciona bastante raro"
};
const tr = {
  hello: "merhaba dunya",
  works: "garip bir sekilde calisiyor."
};
const data = { en, es, tr };

class Localize extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lang: props.initialLanguage || "en"
    };
  }
  render() {
    if(!this.props.data) return null;

    return this.props.render({
      selectedLanguage: this.state.lang, 
      onChange: lang => this.setState({ lang }),
      dict: (this.props.data[this.state.lang]) || {}
    });
  }
}

const App = () => (
  <Localize
    data={data}
    initialLanguage="en"
    render={({ dict, onChange, selectedLanguage}) => (
      <div>

        <h1>localize</h1>
        <div>You have selected: {selectedLanguage}</div>

        <button onClick={() => onChange("en")}>en</button>
        <button onClick={() => onChange("es")}>es</button>
        <button onClick={() => onChange("tr")}>tr</button>
        <div>{dict.hello}</div>
        <div>{dict.works}</div>
        <div>
          <div>
            <span>{dict.hello}</span>
          </div>
          <div>
            <span>{dict.works}</span>
          </div>
        </div>
      </div>
    )}
  />
);

ReactDOM.render(<App />, document.querySelector("#root"));

Sandbox example https://codesandbox.io/s/218vx9oo5r

Answer 2

React component type is a function rather then a regular component which is a string.

This is my solution for it:

function buildChildrenWithProps(children, props) {
    return React.Children.map(children, (child) => {

        // if not a valid Component
        if (typeof child.type !== 'function') {
            return child;
        }

        return React.cloneElement(child, Object.assign({}, child.props, props));
    });
}

And the usage is this:

render(){
    const _children = buildChildrenWithProps(this.props.children, {/*props*/});

    return (
       <div>{_children}</div>
    );
}