[React] react render 함수에서 a태그의 href값을 동적으로 변경하고 싶을때 .

render{

    const {datas} = this.props;   

 return (

        <ul>

            {

                this.props.datas.map(data => {

                    return <li key={data.id}><a href='/url/' + {data.id}>{data.title}</a></li>

                }

            }

        </ul>

    );

}

<a href='/url/' + {post.id}>

이 부분을 map 함수 실행되는 동안 고유의 값(id)으로 변경하면서 링크를 생성하고 싶다.

아무리 href속성에서 +를 쓰려해봐도 에러나고, 어떻게 값을 문자열로 변경하여 붙일 수 있을까?

href={'/url/' + data.id}

이렇게 하면 된다.

{} 한 뒤에 그 안에 문자열 + data.id로 작성하면 문자열로 변환되어 map함수로 실행하면 정상적으로 작동된다.