CODEWITHSUNDEEP
reactjsreduxreact-redux
patricK
patricK

Reputation: 1105

react redux dont render when diplay none

I want to show/hide a TR(detail) when another TR(parent) was clicked (like expand/hide details).

But when TR is invisible (diplay:none) it's never go back to visible. If I put all TRs visible, I can see the state changing

In this example, I want to show just the "detail row" that "parent row" was clickd. My code:

Table render

 return (
        <Fragment key={"F"+i}>
          <BoardTableRow obj={res}        id={"id-"+i}        key={"P"+i} /> 
          <BoardDetailTableRow obj={res}  id={"detail-id-"+i} key={"D"+i} />
        </Fragment> 
      );

Parent render

export function BoardTableRow(props) {

    const current = useSelector(selectCurrent);
    const dispatch = useDispatch();   

    return (
        <tr className={ (props.obj.isRented) ? 'color-red' : ''  } onClick={() => dispatch(lineClick(props.id))}>
            <td className="text-center">{props.obj.name} {current}</td> 
            <td className="text-center">{props.obj.category} </td>                           
            <td className="text-center">{ (props.obj.isRented) ? "não" : "sim"}</td>
            
        </tr>
    );

}

Detail render

export function BoardDetailTableRow(props) {

    const current = useSelector(selectCurrent);
    let rowId = ("detail-"+current)

    let visible = (rowId == props.id ? 'visible' : 'none')
    let invisible = (rowId == props.id ? 'false' : 'true')


    // just to see if was right
    //visible = 'visible'
    let actual = (rowId == props.id ? 'YES' : 'NO') 

    
    return (
        <tr  style={{display:  visible }}>
            <td className="text-center" colSpan='3'>
                <p  wfd-invisible={invisible} style={{display: visible }}> {actual}  </p>
            </td>            
        </tr>
    );

}

If I "uncomment" that visible snippet visible = 'visible', it works:

enter image description here

What is wrong?

Upvotes: 0

Views: 56

Answers (1)

szczocik
szczocik

Reputation: 1333

I think it might not update the CSS styles correctly for you. Did you try doing a conditional render instead? If the visible is false, you can just return null, otherwise you will render the details of the component

export function BoardDetailTableRow(props) {
    const current = useSelector(selectCurrent);
    let rowId = ("detail-"+current)

    let visible = (rowId == props.id ? 'visible' : 'none')
    let invisible = (rowId == props.id ? 'false' : 'true')

    let actual = (rowId == props.id ? 'YES' : 'NO') 

    if (!visible) {
        return null;
    }

    return (
        <tr>
            <td className="text-center" colSpan='3'>
                <p  wfd-invisible={invisible} style={{display: visible }}> {actual}  </p>
            </td>            
        </tr>
    );

}

Upvotes: 1

Related Questions