1

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 (
               
            )
        }
    }
J. Cake
  • 241
  • 2
  • 11

2 Answers2

1

If, as you described, TheList is a child of CreateList, then you could pass the prop from parent to child. But in your code example, both code files seem to be unrelated, there is no <TheList> inside the <CreateList> render function.

I suspect that the actual connection between both might be hidden inside React Router, as your code seems to get props.match from somewhere. Have you tried, if your solution is not working? If React Router handles the URL, and if /lista/:idList is defined as a route, with :idList being a parameter, it should be accessible in something like props.match.params.idList. See How to get params in component in react router dom v4.

Another, now recommended, way to share information between components even if they are not coupled as parent and child, is the context API.

Ingo Steinke
  • 340
  • 2
  • 7
  • 14
  • I see. Yeah there is no relation between the two apart from being used with React Router. I´ll probably have to do it with React context, thanks. – J. Cake Nov 11 '19 at 16:11
  • Hi @J.Cake if this answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Ingo Steinke Nov 25 '19 at 13:59
0

Try window.location.hash.split('/').pop()

AnatH
  • 76
  • 5