I´ve seen several posts regarding this but they all seem getting their pararms from a fixed one. Example:
<Link to=`/lista/:idList`}> <button>Go To List</button> </Link>
Then you can get them doing this:
componentDidMount() {
console.log(this.props.match.params);
}
But what about if in my App I have it like this:
<Link to={`/lista/${this.state.url_lista}`}> <button>Go To List</button> </Link>
The param depends on the state of the parent component (CreateList.js), when I click Go To List the App goes to the Child component (TheList.js). If I want to get the params (basically, this.state.url_lista) then I can not do the above, can I?
Also I can not pass state from a parent to a child right?
This is the code of both components:
export default class CreateList extends Component {
state = {
listaIsCreated: false,
lista: "",
url_lista: ""
}
createList = (event) => {
event.preventDefault()
this.setState({
listaIsCreated: true,
lista: event.target.elements.titulolista.value
})
const tituloLista = event.target.elements.titulolista.value;
axios.post('http://localhost:4000/api/list', {
title: tituloLista
})
.then(res => {
console.log(res)
let id_newList = res.data._id;
this.setState({
url_lista: id_newList
})
})
.catch(error => {
console.error(error)
})
}
render() {
</div><Link to={`/lista/${this.state.url_lista}`}> <button>Go To List</button> </Link></div>
)
}
}
}export default class TheList extends React.Component {
state = {
titulo_lista: ""
}
componentDidMount() {
console.log(this.props.match.params);
// Do get request using the url params
}
render(){
return (
)
}
}