2

I'm out of ideas so I want to ask you. I'm trying to readfile and then dynamically render components which was in that file. For example I'll have MyComponent where I will have all of my Components in a JSON object and when I read the file, it will send through props values I need. This goes fine, but when I want to render a specific object, string received through some async fs library with readfile function isn't accessible in brackets [] and gives me an error.

so its - Loading file component,sending props to abstract component where are all components stored in JSON... when I load const SuperComponent = components[this.props.compType]; and then return it like return() it wont load cause I have promisied string (from file) but when I type in that variable 'MyComponent' by hand it works... but when it loads from file it crashes.... any ideas how to get through it? Need it for my project...

So here I'm reading XML and parsing ( I'm trying to show one component - send to him a function to increase count of processingObject integer and then show next component cause of Array....

//Here I'm reading the file and passing prop to abstract component
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import RNFS from 'react-native-fs';
export default class App extends Component {
constructor(props){
super(props);

this.state = {
  arrayComponentNames:[],
  currentCompo:0,
}
}
 async readScheme() {

        let file = await RNFS.readFile(this.state.actualScheme, 'utf8');
        let xml = new XMLParser().parseFromString(file);
        let scheme = xml.getElementsByTagName('Scheme')[0];
        this.setState({
            SchemeCount: xml.getElementsByTagName('Scheme').length
        });
        let SchemePropertiesLength = scheme.children.length;
        for (let o = 0; o < SchemePropertiesLength; o++) {
            switch (scheme.children[o].name) {
                case 'FirstComp':
                    let oldArray1 = this.state.arrayComponentNames;
                    oldArray1.push(scheme.children[o].value);
                    this.setState({
                        arrayComponentNames: scheme.chidlren[o].value;
                    });
                    break;
                case 'SecondComp':
                    let oldArray2 = this.state.arrayComponentNames;
                    oldArray2.push(scheme.children[o].value);
                    this.setState({
                        arrayComponentNames: scheme.chidlren[o].value;
                    });
                    break;
        }
    }
increase(){
this.setState({currentCompo:this.state.currentCompo+1});
}
  render() {
    return (
      <View style={styles.container}>
        <MyComponent type={this.state.arrayComponentNames} onPressFunc={() => this.increase()}/>
      </View>
    );
  }
}

and here I'm trying to get string from file and send through props to another abstract component which should make a decide which component will be rendered...

//Here I'm reading the file and passing prop to abstract component
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import RNFS from 'react-native-fs';
import xml-parser from 'react-xml-parser';


const components = {
  first:First,
  second:Second,
}
export default class App extends Component {
constructor(props){
super(props);
}
  render() {
    const SuperComponent = components[this.props.type];
    return (
      <View style={styles.container}>
        <SuperComponent/>
      </View>
    );
  }
}
13
  • Please add minimal reproducible example to your question.
    – bennygenel
    Apr 18, 2018 at 15:07
  • Added, any ideas? Apr 18, 2018 at 15:47
  • How do you import MyComponent, First and Second component? Did you check if this.props.type is not null or undefined?
    – bennygenel
    Apr 18, 2018 at 15:56
  • Its written in a few minutes just to ilustrate problem... Sorry for no checking errors.. Its not undefined.. When trying to display that in alert or console.log its okay.. I can also setstate and it displays.... Buď when using it in component object... Not working... Apr 18, 2018 at 16:15
  • This doesn't answer my question. How do you import or create MyComponent
    – bennygenel
    Apr 18, 2018 at 16:17

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.