¿Es esto lo que estás buscando?

 function FillData(keyword) {
 return <div className="App">
 {Data.map(datan => (
 <div className="box">
 {datan[keyword]}
 </div>
 ))}
 </div>
}

Si se va a usar FillData como componente, es posible que necesite esto en su lugar:

 function FillData(props) {
 return <div className="App">
 {Data.map(datan => (
 <div className="box">
 {datan[props.keyword]}
 </div>
 ))}
 </div>
}

Entonces puedes usar FillData así:

 <div><FillData keyword="foo" /></div>

Le sugiero que proporcione más contexto en su código para que sea más legible:

Si la keyword es un accesorio que se supone que extrae un valor de una key en un objeto, entonces necesita usar la notación de corchetes para extraer el valor de un objeto. En JavaScript, a diferencia de muchos otros idiomas, puede usar square brackets con una clave de cadena para extraer valores de un objeto o puede usar dot notation para extraer una clave de cadena codificada. Por ejemplo, myObj.keyword solo obtendrá valores en la key con el nombre de cadena "keyword" . Es equivalente a: myObj["keyword"] . Es posible que desee extraer una word clave dinámica de myObj. Para hacer eso, necesitará usar myObj[someKeyName] y luego puede definir dinámicamente `var someKeyName = "lo que quiera" (y permitir que se reasigne).

 {
 Data.map( datan => {
 return(
 <div className="box">
 {datan[keyword]}
 </div>
 )
 } )
 }

Pero esto solo funcionaría si la keyword volviera como una cadena. Te recomiendo console.log qué word clave es y cuál es su valor para asegurarte de que es lo que esperas.

En React, todos los accesorios se encuentran bajo un objeto generalmente denominado accesorios. Entonces, para obtener la keyword prop de su objeto, necesitará: props.keyword o puede usar la desestructuración para extraer el valor keyword de la word clave del objeto props. Entonces, con toda probabilidad, tenía la intención de hacer: function FillData({ keyword }) { que desestructuraría la "word clave" del objeto de accesorios. También recomendaría llamarlo objectKey en lugar de word clave, lo que podría ser mucho más ambiguo.

Todavía no estoy seguro de lo que quería lograr, pero lo más probable es que esto haga algo:

 function FillData({ keyword }) {
// to make sure: I'd recommend:
// I'm not sure what Data is but I hope that it is an array.

// It is also possible that Data has not been resolved as a promise yet.
// For the following to work Data should be an array of objects
// all which have the dynamic `key` in the object.
// you should be able to do Data[0][keyword] and see a string.
console.log(keyword, Data)
 return (<div className="App">
 {Data.map( datan => {
 return(
 <div className="box">
 {datan[keyword]}
 </div>
 )
 })
 }
 </div>)
}

Esto funcionaría si proporciona algo como: <FillData keyword="name" /> . Además, asume que Data se definen como una matriz de objetos con la clave de nombre completada como: Data = [{name: 'hi' }, { name: 'something'}]