0

I have read how to dynamically map initialValues in redux form but I need to do some data transformations in a helper function inside my class component. I'm doing this in a helper function because there are some params I need to gather first from this.props.match.params. These params help to grab the corrrect data to be edited in redux form. Thanks in advance. I appreciate any help!

function mapStateToProps(state){    
// First I tried to do the transformations here 
// but I have no access to this.props.match.params

return {       
    data: state.data,
    initialValues: {a: 'foo', b: 'faa'}  //<== I believe I should insert initialValues here        
}

}

This is part of code where I gather necessary data before creating the form:

class Edit extends Component {
constructor(props){
    super(props)

    const path = this.props.match.params

    this.state = {
        file: path.file,
        tree: path.tree,
        branch: path.branch,
        node: path.node,
        row: path.row
    }
}
componentWillMount(){
    const {file} = this.state
    if(!(file in this.props.data)){
        this.props.getPageData('settings')            
    }else{
        console.log('we have data')
    }     
}
doTransformations(){


    let myData,dataToEdit
    const {file,tree,branch,node} = this.state        
    myData = this.props.data[file]
    if(myData){

        // Data transformations
        // Basically we want to create a nice object from the messy data coming from an XML FILE :-/
         let dataToEdit = myData[file][tree][branch][node]
         const arr = Object.entries(dataToEdit)
         const myObj = {}
         arr.map((i,x)=>{
            myObj[i[0]] = i[1]._text
         })

         /// Somehow assign myObj to initialValues
    }
}

1 Answers1

0

If you ever need to access props from your component in mapStateToProps you can use ownProps.

I was able to it like this:

function mapStateToProps(state,ownProps){  

// Do the necessary transformations 

const myData = state.data.settings
let dataToEdit, myObj = {}
if(myData){
    // Get params
    const {file,tree,branch,node} = ownProps.match.params
    // Build path to data        
    dataToEdit = myData[file][tree][branch][node]
    const arr = Object.entries(dataToEdit)       
    // We want to create a nice object from the messy data coming from an XML FILE :-/
    arr.map((i)=>{
        myObj[i[0]] = i[1]._text
    })        
}
// console.log(myObj)
return{       
    data: state.data,
    initialValues: myObj
}

}